如何在devtools中调试时禁用chrome扩展JS？

Question

当我添加鼠标事件断点时,devtools总是会跳转到扩展的JS.

有没有办法直接指向我的鼠标事件代码？

Answer 1

我认为最简单的方法是在那里打开一个隐身窗口(Ctrl-Shift-N)(或Cmd-Shift-N用于mac)并进行调试,因为这样就不会加载扩展(默认情况下).

我知道你的意思是这个问题:在调试时,做一些简单的事情,比如暂停执行,你总会发现它分成了一个扩展代码而不是当前网页的代码.

Answer 2

禁用脚本(例如避免副作用)的唯一方法是禁用扩展程序(例如,如果未在隐身模式下启用扩展程序,则使用隐身模式).

如果你不介意运行脚本,但想忽略扩展代码,那么你可以使用Chrome的devtools脚本黑盒子功能.

如果您从未开发扩展程序并且对单步执行不感兴趣,请打开devtools的设置菜单,单击Blackboxing,然后单击"Blackbox内容脚本"复选框:

如果您只想有选择地忽略文件,那么您也可以右键单击要忽略的文件的源,然后单击"Blackbox Script"上下文菜单选项.要删除图案,请转到"Blackboxing"设置面板,如前所示.

Answer 3

打开开发人员工具，然后转到设置，然后单击忽略列表，选中将内容脚本添加到忽略列表的复选框，然后将其添加到忽略列表：^chrome-extension://

Answer 4

首先，您可能应该在此处查看有关如何调试 Chrome 扩展的教程：

如有疑问，您始终可以debugger直接在要启动调试器的 JavaScript 代码中使用关键字，如下所示：

element.addEventListener("mouseover", function() {
    debugger;
    // some JS handler code...
});

根据您的 JS 是在弹出窗口、后台页面还是内容脚本中，您需要确保从正确的位置启动开发工具。

对于弹出窗口，您需要右键单击扩展图标和“检查弹出窗口”，然后从 JavaScript 控制台运行location.reload(true)

对于后台页面，您需要转到扩展程序设置页面，chrome://settings/extensions打开开发人员模式，展开相关扩展程序，然后单击后台页面链接。

内容脚本应该可以直接从其加载到的页面上看到。