Import/export Chrome devtools breakpoints & settings between computers

Question

Quoting the original idea:

I came across a problem where I need to share all my debugger breakpoints to my colleague to debug the issue at his end. So thought of implementing something like export the debugger points from one system and import at other system.

Since devtools doesn't provide a built-in import/export feature, is there another way?

Answer 1

Use devtools-on-devtools:

1. open devtools and switch its Dock side in the menu to a detached (floating) window

   

2. in the now detached devtools press CtrlShifti or ⌘Shifti on MacOS,
   which will open devtools-on-devtools in a new window

UI method:

3. in this new window switch to Application tab, expand Local Storage, then devtools://devtools on the left
4. double-click breakpoints value on the right and copypaste it
5. Now do the same on the target computer and reopen the main devtools window afterwards.

Console method (especially useful if the value is too long):

3. run copy(localStorage.breakpoints) in devtools-on-devtools console on the source computer to copy the value to clipboard
4. run localStorage.breakpoints=prompt() on the target computer
   (the prompt will appear in the main devtools window).

Console method to export everything:

3. run copy(JSON.stringify(localStorage)) in devtools-on-devtools console on the source computer to copy the value to clipboard
4. run Object.assign(localStorage, JSON.parse(prompt())) on the target computer
   (the prompt will appear in the main devtools window).

P.S. Next time you can quickly toggle the detached state of devtools by pressing CtrlShiftD