调试 Chrome 扩展的 popup.html？

Question

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

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

Answer 1

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

Answer 2

Inspect Popup 已在最新版本中消失。

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

1. 单击您的弹出按钮以查看网页（弹出窗口本身）。
2. 在窗口中右键单击并选择检查元素
3. Chrome Debugger 窗口提供了正确的上下文，但您已经错过了断点和debugger语句。
4. 这就是诀窍。 单击调试器的控制台部分并输入： location.reload(true)并按回车键。

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

Answer 3

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

然后，您可以通过以下方式在常规窗口中加载弹出窗口

chrome-extension://id_of_your_application/popup.html

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

Answer 4

尝试在 DevTools Settings的右下角切换Auto-open DevTools for popups ：

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

// @sourceURL=popup.js

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

Answer 5

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