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

Question

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

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

- Skizit

---

文献记录，教程：调试：https://developer.chrome.com/extensions/tut_debugging - brasofilo

Answer 1

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

- TimCodes.NET

---

在Chrome 22版中（于2012年8月1日的Canary版本），“检查弹出”的选项已被删除，可能是因为您可以从弹出窗口中的“检查元素”进行调试。然而，由于这个原因，没有办法在代码加载时进行调试或设置断点。目前我唯一的解决方法是设置一个10-15秒的setTimeout，这样我就有时间打开弹出窗口，选择“检查元素”，找到“脚本”标签并在超时函数内设置断点。您知道更简单的方法吗？ - Schmuli

我不知道，抱歉。我希望谷歌浏览器团队能停止破坏原有功能。 - TimCodes.NET

请检查弹出窗口本身，然后使用 location.reload(true) 来重新加载它。 - David Dehghan

“Inspect popup”在版本38中被确认存在，可能在早期版本中也有。 - Lars Viklund

这似乎已经过时了。请考虑下面@Tom N的回复。 - lephleg

它能工作，但有没有办法将控制台带到网页的前面或将其停靠在当前网页内？@TimCodes.NET - Ponpon32

Answer 2

最新版本中已经取消了检查弹出窗口。

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

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

现在您就可以触发断点了！这是一种非常好的重新加载更改后的脚本而无需重新访问扩展程序页面的方法。

- Tom N

---

当我在页面操作图标上右键单击时，我确实会得到弹出窗口。 - ripper234

在调试器中，您也可以直接按 F5 键，它会触发 "重新加载" 而不是 "运行"。尽管这应该被视为用户界面的错误，因为开发者们会期望按F5键时程序会"运行"而不是"重新加载"。所以，当您在错误的时间按下有用的 F5 键时，要小心它可能会破坏我的一些调试。 Firefox 中也会出现类似情况。 - Roland Pihlakas

在Chrome 47中，加载扩展时无法触发断点仍然是一个问题，因此您的location.reload(true)提示非常宝贵！ - Eric Majerus

这是一个很好的解决方法。很多时候，“检查弹出窗口”无法触发断点。 - DShultz

Answer 3

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

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

chrome-extension://id_of_your_application/popup.html

将manifest.json文件中"default_popup"属性所指定的文件替换为popup.html文件。

- Pavel Hlobil

---

我尝试过了，如果您的扩展是一个弹出窗口，它就能正常工作。这里有一个 AdBlock 弹出链接的示例，可以在浏览器中运行。您必须安装 AdBlock。chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/button/popup.html - Pavel Hlobil

没问题，谢谢 Pavel))) - Andrew

有些扩展程序没有popup.html文件。在调试之前，您必须知道该文件的名称。 - Brian

谢谢你，@PavelHlobil！ - james075

这完全解决了在首次打开扩展时无法在DevTools中查看初始请求的问题。谢谢！ - docta_faustus

Answer 4

尝试在DevTools“设置”中的右下角切换“自动打开弹出窗口的DevTools”： 检查扩展程序弹出窗口中的JavaScript的另一种好方法是向待调试脚本末尾添加特殊注释：

// @sourceURL=popup.js

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

- hypers

Answer 5

是的，在扩展程序图标上有“检查弹出窗口”的选项，此外您也可以从扩展程序管理器中检查您的选项页面。

- aCode