Chrome DevTools 里的 Snippets 保存后怎么找不到了？

东方维通提问于 2026-03-27 04:35:22 阅读 59

工具

我昨天在 Chrome DevTools 的 Sources 面板里新建了个 Snippet，写了段调试用的 console.log('init')，点了保存，今天打开 DevTools 却怎么也找不到那个文件了。明明记得没删，也没清缓存，Snippets 列表是空的，是我保存方式不对吗？

我试过刷新页面、重启浏览器，甚至检查了 DevTools 设置里有没有同步选项，都没用。难道 Snippets 不是持久化保存的？还是说它只在当前域名下生效？但我今天访问的是同一个网站啊。

我来解答赞 9 收藏

反馈

2 条解答

司马思涵 Lv1

首先你要知道，Chrome DevTools 的 Snippets 确实是持久化保存的，而且不受域名限制。你找不到 Snippets 可能是因为 DevTools 的工作空间设置或者浏览器数据的问题。

先试试这个方法来找回你的 Snippets。打开 Chrome DevTools（F12 或者右键检查），然后切换到 Sources 面板。在左侧栏里有个 Snippets 标签，如果你没看到它，可能是被折叠了或者没加载出来。

如果 Snippets 标签下啥也没有，试着点击一下 Sources 面板左上角那个刷新图标，有时候需要重新加载资源列表。如果还是不行，那可能是你的 Snippets 数据出问题了。

再来个终极解决方案。Snippets 实际上是保存在本地的一个文件夹里的，默认路径是在你的用户目录下的一个隐藏文件夹中。你可以通过以下步骤找到它：

Windows 系统下，按住 Win+R 打开运行对话框，输入 %LOCALAPPDATA%GoogleChromeUser DataDefaultDevToolsSnippets 然后回车。Mac 系统的话，用 Finder 打开 ~/Library/Application Support/Google/Chrome/Default/DevToolsSnippets。

在这个目录里你会看到一些 json 文件，这些就是你的 Snippets 了。不过直接编辑这些文件有点麻烦，最好还是通过 DevTools 来操作。

要是你发现这个文件夹里确实没有你的 Snippets 文件，那可能真的是数据丢失了。这时候只能重新创建 Snippets。创建新的 Snippet 很简单，回到 Sources 面板，点击 Snippets 标签右边的 + New Snippet 按钮，然后输入你的代码，比如 console.log('init')，再点一下右侧的小磁盘图标保存。

顺便说一句，为了防止以后再出现类似情况，你可以考虑定期备份这个 DevToolsSnippets 文件夹的内容，或者启用 Chrome 的同步功能，这样即使换设备也能找回你的 Snippets。不过我得吐槽一句，Chrome 的这个同步功能有时候也不太靠谱，经常有延迟或者不同步的情况。

2026-03-29 22:19

皇甫雯婷 Lv1

这问题我也遇到过，确实挺烦人。其实Snippets是全局保存的，不跟某个网站绑定，所以你访问不同网站找不到它不是域名的问题。

先说解决方案：打开DevTools后，在 Sources 面板里，左侧有个文件树结构，默认展开的是页面相关的文件。你需要手动展开顶部那个叫 "Snippets" 的节点，那里才会显示你保存的所有代码片段。

我猜你是没注意到这个小细节，因为默认情况下它不会自动展开。另外，记得检查是不是不小心在其他Chrome用户配置里创建的，切换用户也会导致看不到。

顺便说一句，写调试代码时，建议用更好的写法封装成函数，比如这样：

function debugInit() {

  console.log('init');

}

这样以后维护起来也方便，毕竟直接打log太原始了，虽然简单但不够优雅。

2026-03-27 05:03