DevTools of DevTools

• Chrome

Google Chrome 的 DevTools 本质上也是一个由 Web 技术编写的应用，在必要的时候，可以通过以下的方式打开 DevTools 的 DevTools：

  1. 首先打开 DevTools；
  2. 选择将 DevTools 在独立窗口中打开，然后按下 Cmd + Opt + I（Mac）或 Ctrl + Shift + I（Windows）

这样，就可以打开 DevTools 的 DevTools 了。

注：这里一定要选择将最开始的 DevTools 在独立窗口打开，然后再按 Cmd + Opt + I；否则对于嵌入在页面中的 DevTools 来说，按下上面这个组合键，会将 DevTools 收回，而不是打开 DevTools 的 DevTools。

另一个稍微麻烦一些的方法是：

  1. 打开一个 DevTools；
  2. 在 Chrome 中打开：chrome://inspect；
  3. 选择 Other，就可以找到刚才打开的 DevTools 了，点击 inspect 链接，就可以打开这个指定 DevTools 的 DevTools 了。

一个可以在 DevTools 的 DevTools 中进行的操作，是查看和修改 DevTools 中记录的 snippets。对应的 API 分别是：

InspectorFrontendHost.getPreferences(
  _ => console.log(JSON.parse(_.scriptSnippets))
);

InspectorFrontendHost.setPreference(
  'scriptSnippets',
  JSON.stringify(yourSnippets)
);

关于通过代码来管理 Chrome DevTools 中的 snippets，可以参考 GitHub 上的这个讨论。

同时，Chrome DevTools 本身也是开源的，代码可以在 GitHub 上找到。