Import/export Chrome 计算机之间的 devtools 断点和设置

Import/export Chrome devtools breakpoints & settings between computers

引用 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.

由于 devtools 没有提供内置的 import/export 功能，还有其他方法吗？

使用 devtools-on-devtools：

  1. 打开 devtools 并将菜单中的 Dock side 切换为分离（浮动）window

  2. 在现在分离的 devtools 中按 CtrlShifti 或者⌘Shifti 在 MacOS 上，
    这将在新的 window

    中打开 devtools-on-devtools

UI方法：

  1. 在这个新的 window 中切换到 Application 选项卡，展开 Local Storage，然后在左侧 devtools://devtools
  2. 双击右侧的breakpoints值并复制粘贴
  3. 现在在目标计算机上执行相同的操作，然后重新打开主开发工具 window。

控制台方法（值太长时特别有用）：

  1. 运行 copy(localStorage.breakpoints) 在源计算机上的 devtools-on-devtools 控制台中将值复制到剪贴板
  2. 运行 localStorage.breakpoints=prompt() 在目标计算机上
    （提示将出现在主开发工具 window）。

导出所有内容的控制台方法：

  1. 运行 copy(JSON.stringify(localStorage)) 在源计算机上的 devtools-on-devtools 控制台中将值复制到剪贴板
  2. 运行 Object.assign(localStorage, JSON.parse(prompt())) 在目标计算机上
    （提示将出现在主开发工具 window）。

P.S。下次您可以通过按 CtrlShiftD[=21= 快速切换 devtools 的分离状态]