Javascript 调试 Chrome 扩展的 popup.html？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5039875/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Debug popup.html of a Chrome Extension?
提问by Skizit
I'm making a Chrome Extension and need to view the HTML/CSS/JS of the popup.html.
我正在制作一个 Chrome 扩展程序，需要查看popup.html.
I can't right click to inspect elements. Is there another way? I need to make sure CSS and JavaScript is being inserted correctly. How to debug a problem in that popup file?
我无法右键单击来检查元素。还有其他方法吗？我需要确保正确插入 CSS 和 JavaScript。如何调试该弹出文件中的问题？
回答by TimCodes.NET
Right click the extension's button, then 'Inspect Popup'
右键单击扩展程序的按钮，然后“检查弹出窗口”
回答by Tom N
Inspect Popup has gone away with the latest build.
Inspect Popup 已在最新版本中消失。
Here's how I debug Chrome Extension Popups.
这是我调试 Chrome 扩展弹出窗口的方法。
- Click your popup button to see the webpage (the popup window itself).
- Right-click in the window and select Inspect element
- The Chrome Debugger window comes up with the right context, but you've already missed your breakpoints and
debuggerstatements. - HERE'S THE TRICK. Click on the Console part of the debugger and type:
location.reload(true)and press enter.
- 单击您的弹出按钮以查看网页（弹出窗口本身）。
- 在窗口中右键单击并选择检查元素
- Chrome Debugger 窗口提供了正确的上下文，但您已经错过了断点和
debugger语句。 - 这就是诀窍。单击调试器的控制台部分并键入：
location.reload(true)并按回车键。
Now your breakpoints are hit! Great way to reload changed scripts without revisiting the Extension page.
现在你的断点被击中了！无需重新访问扩展页面即可重新加载更改的脚本的好方法。
回答by Pavel Hlobil
Perhaps another way may be to find the ID: for your application in chrome://chrome/extensions/
也许另一种方法可能是在 chrome://chrome/extensions/ 中为您的应用程序找到 ID：
You can then load your popup in a regular window by
然后，您可以通过以下方式在常规窗口中加载弹出窗口
chrome-extension://id_of_your_application/popup.html
Exchange popup.html for the file you have specified in manifest.json under "default_popup" property.
为您在 manifest.json 中“default_popup”属性下指定的文件交换 popup.html。
回答by aCode
Yes, 'Inspect Popup' on the extension icon, and apart from that - from extension manager you can also inspect your options page.
是的，扩展图标上的“检查弹出窗口”，除此之外 - 从扩展管理器中，您还可以检查您的选项页面。
回答by hypers
Try switching Auto-open DevTools for popupsin the bottom right of DevTools Settings:
尝试在 DevTools Settings的右下角切换Auto-open DevTools for popups：
Another good way to inspect Javascript being part of the extension popup is adding special comments to the end of the script to be debugged:
检查作为扩展弹出窗口一部分的 Javascript 的另一种好方法是在要调试的脚本的末尾添加特殊注释：
// @sourceURL=popup.js
This is de-facto a directivefor DevToolsto include this specific file into Sourcestab. From there you can inspect code, add breakpoints, output to console, etc. as usual.
这是事实上的一个指令为DevTools包括这个特定的文件到源选项卡。从那里你可以像往常一样检查代码、添加断点、输出到控制台等。
