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

标签 javascript google-chrome google-chrome-devtools javascript-debugger

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

有没有一种方法可以从 Chrome 调试器中“固定”或“添加书签”对 Javascript 源代码的引用,这样我就不必在每次重新加载网页时都深入查看源代码树来返回再次到那个源文件?

最佳答案

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

  1. 在“源”选项卡中打开的文件在浏览器 session 之间保留,因此您可以将其保留在那里而不关闭它。这是我注意到的第一件事。

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

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

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

    我没有这方面的一个很好的例子,但我在下面映射了 css 文件夹。

    Workspace Network

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

Workspace Filesystem

关于javascript - 有什么方法可以固定或添加 Javascript 源文件以便从 Chrome 调试器轻松访问?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41898156/

相关文章:

java - 将 Chrome Selenium 驱动程序添加到 Ubuntu

javascript - 无法使用 Chrome 控制台加载页面

javascript - Chrome : format specifier prints NaN instead of number

javascript - 我是否错误地使用了 GraphQL?我不知道它如何向我发送回数据

javascript - 根据正在过滤的值更改字体颜色angularjs

javascript - JQuery,JavaScript slideToggle()

javascript - Angularjs 将服务注入(inject)指令中

php - Laravel 5.2 Monolog 在 Chrome 控制台输出

javascript - 在 Chrome 浏览器中检测插件版本

javascript - jQuery + 开发工具 : how can I quickly get the event handler(s) attached to the element