调试 Chrome 扩展的 popup.html？答案

【问题标题】：Debug popup.html of a Chrome Extension?调试 Chrome 扩展的 popup.html？
【发布时间】：2020-03-19 20:17:52
【问题描述】：

我正在制作 Chrome 扩展程序，需要查看 popup.html 的 HTML/CSS/JS。

我无法右键单击检查元素。还有其他方法吗？我需要确保正确插入 CSS 和 JavaScript。如何调试该弹出文件中的问题？

【问题讨论】：

【解决方案1】：

右键单击扩展的按钮，然后“检查弹出窗口”

【讨论】：

在 Chrome 22（Canary 于 2012 年 8 月 1 日）中，“检查弹出窗口”选项已被删除，可能是因为您可以从弹出窗口中“检查元素”。但是，正因为如此，无法在加载时运行的代码上调试/设置断点。到目前为止，我唯一的解决方案是将 setTimeout 设置为 10-15 秒，这样我就有时间打开弹出窗口，选择“检查元素”，找到脚本标签并在超时函数中设置断点。你知道更简单的方法吗？
我不知道，抱歉，我希望 chrome 团队不要再破坏了。
检查弹出窗口本身，然后使用 location.reload(true) 重新引导它
Inspect popup 已在版本 38 中得到验证，也可能在早期版本中。
这似乎已经过时了。请考虑下面@Tom N 的回复。

【解决方案2】：

Inspect Popup 已随最新版本消失。

这是我调试 Chrome 扩展弹出窗口的方法。

现在你的断点被命中了！无需重新访问扩展页面即可重新加载更改的脚本的好方法。

【讨论】：

当我在页面操作图标上右击时确实得到了弹出窗口。
您也可以在调试器中按 F5，它会触发“重新加载”而不是“运行”。虽然这应该被视为 UI 错误，因为开发人员希望 F5 能够“运行”，而不是“重新加载”。所以，当心这个有用的 F5 在错误的时间击中时也会弄乱我的一些调试。后者也发生在 Firefox 中。
在 Chrome 47 中，在扩展加载时没有达到断点仍然是一个问题，所以你的 location.reload(true) 提示是无价的！span>
这是一个很好的解决方法。很多时候“检查弹出窗口”不会遇到断点。

【解决方案3】：

也许另一种方法是在 chrome://chrome/extensions/ 中找到您的应用程序的 ID：

然后您可以通过

在常规窗口中加载弹出窗口

chrome-extension://id_of_your_application/popup.html

将 popup.html 替换为您在 manifest.json 中“default_popup”属性下指定的文件。

【讨论】：

我试过了，如果你的扩展是一个弹出窗口，它就可以工作。这是在浏览器中运行的 AdBlock 弹出链接示例。您必须安装 AdBlock。 chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/button/popup.html
这特别好，因为Chrome每次点击工具栏按钮时都会重新加载弹出页面，并且每当弹出窗口模糊时“检查弹出窗口”控制台会自动关闭。
为我工作。谢谢帕维尔）））
一些扩展没有popup.html。调试前必须知道文件名。
这完全解决了第一次打开扩展时无法在 DevTools 中看到初始请求的问题。谢谢！

【解决方案4】：

是的，扩展图标上的“检查弹出窗口”，除此之外 - 从扩展管理器中，您还可以检查您的选项页面。

【讨论】：

【解决方案5】：

尝试在 DevTools 设置的右下方切换Auto-open DevTools for popups：

检查作为扩展弹出窗口一部分的 Javascript 的另一个好方法是在要调试的脚本末尾添加特殊的 cmets：

// @sourceURL=popup.js

这实际上是一个指令，用于DevTools 将此特定文件包含到Sources 选项卡中。从那里你可以像往常一样检查代码、添加断点、输出到控制台等。

【讨论】：