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

Question

我正在调试一个深深嵌套在源代码树中的 Javascript 文件。我必须向下钻取的 URL 非常难以记忆，因为我想要的 JS 源代码加载在一个 iFrame 中，该 iFrame 已由加载项 API 加载。

有没有办法从 Chrome 调试器中 "pin" 或 "bookmark" 引用 Javascript 源代码，这样我就不必深入研究了每次我重新加载网页只是为了再次返回到那个源文件时源树？

Answer 1

有几个不同的选项，但 DevTools 中没有特定的 "pinning" 功能。

在“源”选项卡中打开的文件在浏览器会话之间持续存在，因此您可以将其保留在那里而不关闭它。这是我注意到的第一件事。
如果知道文件名，使用Cmd+O (Mac) / Ctrl+O(Windows/Linux)打开'Search by filename'框，然后就可以直接打开文件了，不用通过树.
如果您想实际调试该文件，请按照 Christiaan 的建议进行操作，并在您的源代码中添加 debugger; 语句。这将自动在“源”面板中打开文件，并在您放置它的任何行上中断。您也可以只使用 Chrome 的 built-in 断点。这些将一直存在，直到您禁用或删除它们，并且它不涉及修改任何代码。
使用 Workspaces 将网络路径（例如本地或外部的服务器运行）映射到文件系统上的文件夹。您可以 select 一个特定的嵌套文件夹，而不是添加整个应用程序文件夹。这将出现在“源”选项卡的“文件系统”部分中。此时您可以轻松跳转到该文件。这是我刚刚想出的，所以没有完全测试。

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

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

Answer 2

如果您将以下特殊注释添加到 JavaScript 文件的第 1 行，然后按 Ctrl + P 搜索并打开它，它将有效地固定在源选项卡中，直到您关闭它。即使您关闭 DevTools，或重新启动计算机，或更新 javascript 文件，它仍会保留。

//@ sourceURL=myJavaScriptFile.js

注意：如果像这样在斜杠后添加 space '// @sourceURL=myJavaScriptFile.js' 将不起作用。 - 我之前掉进了那个圈套。

Any way to pin or bookmark a Javascript source file for easy access from the Chrome debugger?