调试Chrome扩展程序的popup.html？

Question

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

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

Answer 1

Inspect Popup已经消失了最新版本。

以下是我调试Chrome扩展程序弹出窗口的方法。

1. 单击弹出按钮以查看网页（弹出窗口本身）。
2. 在窗口中单击鼠标右键，然后选择“检查元素”
3. Chrome调试器窗口会显示正确的上下文，但您已经错过了断点和debugger语句。
4. 这是诡计。单击调试器的控制台部分，然后键入：location.reload(true)并按Enter键。

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

Answer 2

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

Answer 3

也许另一种方法可能是找到ID：适用于chrome：// chrome / extensions /

中的应用程序

然后您可以通过

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

chrome-extension://id_of_your_application/popup.html

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

Answer 4

是，'检查弹出窗口'在扩展程序图标上，除此之外 - 您还可以从扩展程序管理器检查选项页面。

Answer 5

尝试在DevTools 设置中右下方切换自动打开弹出窗口的DevTools ：

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

// @sourceURL=popup.js

这实际上是 DevTools 的指令，可以将该特定文件包含在 Sources 标签中。像往常一样，您可以从那里检查代码，添加断点，输出到控制台等。