[英]Debug popup.html of a Chrome Extension?
I'm making a Chrome Extension and need to view the HTML/CSS/JS of the popup.html
.我正在制作 Chrome 扩展程序,需要查看popup.html
的 HTML/CSS/JS。
I can't right click to inspect elements.我无法右键单击检查元素。 Is there another way?还有其他方法吗? I need to make sure CSS and JavaScript is being inserted correctly.我需要确保正确插入 CSS 和 JavaScript。 How to debug a problem in that popup file?如何调试该弹出文件中的问题?
右键单击扩展程序的按钮,然后“检查弹出窗口”
Inspect Popup has gone away with the latest build. Inspect Popup 已在最新版本中消失。
Here's how I debug Chrome Extension Popups.这是我调试 Chrome 扩展弹出窗口的方法。
debugger
statements. Chrome Debugger 窗口提供了正确的上下文,但您已经错过了断点和debugger
语句。location.reload(true)
and press enter.单击调试器的控制台部分并输入: location.reload(true)
并按回车键。Now your breakpoints are hit!现在你的断点被击中了! Great way to reload changed scripts without revisiting the Extension page.无需重新访问扩展页面即可重新加载更改的脚本的好方法。
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。
Try switching Auto-open DevTools for popups in 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 directive for DevTools to include this specific file into Sources tab.这实际上是DevTools将这个特定文件包含到Sources选项卡中的指令。 From there you can inspect code, add breakpoints, output to console, etc. as usual.从那里你可以像往常一样检查代码、添加断点、输出到控制台等。
是的,扩展图标上的“检查弹出窗口”,除此之外 - 从扩展管理器中,您还可以检查您的选项页面。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.