I'm making a Chrome Extension and need to view the HTML/CSS/JS of the 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?
右键单击扩展程序的按钮,然后“检查弹出窗口”
Inspect Popup has gone away with the latest build.
Here's how I debug Chrome Extension Popups.
debugger
statements. location.reload(true)
and press enter.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/
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.
Try switching Auto-open DevTools for popups in the bottom right of DevTools Settings :
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:
// @sourceURL=popup.js
This is de-facto a directive for DevTools to include this specific file into Sources tab. From there you can inspect code, add breakpoints, output to console, etc. as usual.
是的,扩展图标上的“检查弹出窗口”,除此之外 - 从扩展管理器中,您还可以检查您的选项页面。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.