Chrome开发者工具代码片段导入/导出2016

Question

今天我想从Chrome导出我的代码片段。

我找到了2013年的一些信息：https://github.com/bgrins/devtools-snippets/issues/28#issuecomment-27455522 我打开了开发者工具，将其分离到一个新窗口中，并检查了开发者工具本身。

然后在控制台中执行以下命令：

->localStorage.scriptSnippets
undefined
->var stringifiedSnippets = localStorage.getItem('scriptSnippets');
undefined
->stringifiedSnippets
null

我已测试了Chrome 48 (windows)、Chromium 45(ubuntu)以及我的朋友在他的Macbook上运行的Chrome浏览器。

我该如何访问我的片段。

API是否发生了改变？或者是我犯了错误。谢谢。

- soundyogi

Answer 1

是的，内部已经发生了变化。您的代码应该更改为以下内容：

InspectorFrontendHost.getPreferences(function(prefs) {
    console.log(prefs.scriptSnippets);
});

注意：此脚本应在第二层开发工具窗口中运行！确保开发者工具已经拖出到一个新窗口。然后按下 Ctrl+Shift+i（Command+Option+i）打开开发者工具的开发者工具。在第二个开发工具窗口中运行上述脚本。

- Alexander Pavlov

---

在 Google Chrome 版本 75 中，我遇到了未捕获的 ReferenceError 错误：InspectorFrontendHost 未定义。 - Искрен Станиславов

不再工作了 - OriEng

@ИскренСтаниславов 这个脚本应该在第二层的开发工具窗口中运行！请查看编辑后的注释！ - S.Serpooshan

@ИскренСтаниславов 这个脚本应该在第二层的开发工具窗口中运行！请查看编辑后的注释！ - undefined

Answer 2

对于那些发现已接受的答案不再有效的人，以下是一种方法可以在2022年5月的Chrome 101中访问您的片段。

1. 在Chrome浏览器中的空标签页上键入chrome://version/。
2. 检查"Profile Path:"，应该类似于Ubuntu操作系统中的/home/your_user/.config/google-chrome/Default。
3. 在该路径下找到Preferences文件并在文本编辑器中打开。它是一个大而杂乱的JSON文件。如果你正在使用新机器上的全新Chrome安装进行新安装，那么你可能只需将整个Preferences文件复制到新机器上相同位置，然后我认为你的Chrome安装应该有来自原始剪贴簿的所有片段。否则...
4. 搜索（Ctrl+f）包含引号的"scriptSnippets"属性。
5. 我认为这些片段是按创建顺序排列的。所以不像在片段列表中看到的字母顺序。
6. 我的列表以"scriptSnippets_lastIdentifier":"142"属性结束，这意味着我到目前为止必须创建了142个片段，其中一些已删除，一些仍然存在。
7. 从"scriptSnippets":"[...开始复制一切，直到...}]"，不包括"scriptSnippets_lastIdentifier":"142"或通过名称搜索您感兴趣的片段并仅复制该部分。

- Redu

---

很棒的答案，因为它为团队内共享代码片段的自动化开启了大门。 - Holf

@Holf 是的。也许您甚至不需要设置本地 Web 服务器，可以直接使用 Chrome DevTools 来实现这一目的。如何将 Chrome 用作本地 Web 服务器。 - Redu

Answer 3

InspectorFrontendHost.getPreferences(function(prefs) {
    console.log(prefs.scriptSnippets);
});

这段代码在Chrome版本51.0.2704.103中完美运行。

- tkowt

---

很抱歉，我可以使用InspectorFrontendHost类按照这个问题中所解释的方法打开另一个检查器。这个主题对我来说非常有用，谢谢！ - tkowt