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

Question

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

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

Answer 1

检查Popup已经消失了最新版本.

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

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

您也可以在调试器中按F5键，它触发“重新加载”而不是“运行”。尽管这应该被视为UI错误，但由于开发人员希望F5“运行”，而不是“重新加载”。因此，当在错误的时间击中F5时，也要当心我的一些调试工作。后者也发生在Firefox中。 (2认同)

Answer 2

右键单击扩展的按钮,然后选中"Inspect Popup"

检查弹出窗口本身,然后使用location.reload(true)来重新添加它 (8认同)
在Chrome 22(Canary on 8/1/2012)中,"Inspect Popup"选项已被删除,可能是因为您可以在弹出窗口中"检查元素".但是,因此,无法在加载运行的代码上调试/设置断点.到目前为止,我唯一的解决方案是将setTimeout设置为10-15秒,这使我有时间打开弹出窗口,选择"Inspect Element",找到Scripts标签并在timed-out函数内设置断点.你知道一个更简单的方法吗？ (5认同)
我不知道,对不起,我希望Chrome团队能够停止破坏. (4认同)
正是我想要的.我不知道那里有.谢谢! (3认同)
在第38版中验证了'Inspect popup`,也可能在早期版本中. (3认同)

Answer 3

也许另一种方法可能是找到ID:适用于chrome:// chrome/extensions /的应用程序

然后,您可以在常规窗口中加载弹出窗口

chrome-extension://id_of_your_application/popup.html

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