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

Question

当我添加鼠标事件断点时，devtools 总是跳到扩展的 JS 中。

有什么方法可以直接指向我的鼠标事件代码吗？

Answer 1

禁用脚本（例如避免副作用）的唯一方法是禁用扩展（例如，如果在隐身模式下未启用扩展，则使用隐身模式）。

如果您不介意运行脚本，但想忽略扩展代码，那么您可以使用 Chrome devtools 的脚本 blackboxing 功能。

如果您从未开发过扩展并且对单步调试不感兴趣，请打开开发工具的设置菜单，单击 Blackboxing，然后单击“Blackbox content script”复选框：

如果您只想选择性地忽略文件，那么您还可以右键单击要忽略的文件的源，然后单击“Blackbox Script”上下文菜单选项。要删除图案，请转到“黑盒”设置面板，如前所示。

Answer 2

我认为最简单的方法是打开一个隐身窗口（Ctrl-Shift-N）（或Cmd-Shift-N for mac）并在其中进行调试，因为这样就不会加载扩展（通过默认）。

我知道你这个问题的意思：在调试和执行一些简单的事情（例如暂停执行）时，你总是发现它会中断扩展程序的代码之一，而不是当前网页的代码。

Answer 3

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

Answer 4

我喜欢使用配置文件。

虽然更改为隐身模式可能会帮助您禁用大多数扩展，但其中一些扩展可能会被允许并仍然运行。例如，我在隐身模式下启用了 DarkReader 和 Ublock。

我最喜欢的解决方法是使用“来宾”配置文件或创建可用于调试的配置文件。我认为这比在开发工具中创建框架忽略列表更容易。

示例：

Answer 5

如果您使用的是 Google Chrome（或任何基于 Chromium 的浏览器），只需使用新的用户数据目录运行新的浏览器实例即可。

在 Linux 上：

google-chrome --user-data-dir=$(mktemp -d)

这样，所有扩展都将被禁用，而无需手动关闭/打开它们。

Answer 6

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

如有疑问，您始终可以直接在要启动调试器的 JavaScript 代码中使用

debugger

关键字，如下所示：

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

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

对于弹出窗口，您需要右键单击扩展图标并“检查弹出窗口”，然后从 JavaScript 控制台运行

location.reload(true)

对于后台页面，您需要进入扩展程序设置页面，

chrome://settings/extensions

，打开开发者模式，展开相关扩展程序，然后单击后台页面链接。

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