有什么方法可以固定或收藏 Javascript 源文件以便从 Chrome 调试器轻松访问？

Question

我正在调试一个深深嵌套在源代码树中的 Javascript 文件。我必须深入研究的 URL 很难记住，因为我想要的 JS 源被加载到一个由插件 API 加载的 iFrame 中。

有没有办法从 Chrome 调试器中“固定”或“书签”对 Javascript 源的引用，这样我就不必每次重新加载网页时都钻取源树来返回到该源再存档？

Answer 1

有几个不同的选项，但 DevTools 中没有特定的“固定”功能。

1. 在 Source 选项卡中打开的文件在浏览器会话之间持续存在，因此您可以将其保留在那里而不是关闭它。这是我注意到的第一个明显的事情。

2. 如果您知道文件名，请使用Cmd+ O(Mac) / Ctrl+ O(Windows/Linux) 打开“按文件名搜索”框，然后您可以直接打开文件而不是通过树。

3. 如果您想实际调试文件，请按照 Christiaan 的建议进行操作，并debugger;在源代码中添加一条语句。这将自动在“源”面板中打开文件，并在您放置的任何行上中断。您也可以只使用 Chrome 的内置断点。这些将一直存在，直到您禁用或删除它们，并且不涉及修改任何代码。

4. 使用工作区将网络路径（例如在本地或外部运行的服务器）映射到文件系统上的文件夹。您可以选择一个特定的嵌套文件夹，而不是添加整个应用程序文件夹。这将出现在 Sources 选项卡内的 Filesystem 部分中。此时您可以轻松跳转到该文件。这是我刚刚想出的一个，所以没有经过全面测试。

   我没有一个很好的例子，但在下面我已经映射了 css 文件夹。

   

在文件系统部分，我看到了该文件夹中使用的所有文件，而不是整个源代码树。