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
.
I can't right click to inspect elements. Is there another way? I need to make sure CSS and JavaScript is being inserted c开发者_运维问答orrectly. How to debug a problem in that popup file?
Right click the extension's button, then 'Inspect Popup'
Inspect Popup has gone away with the latest build.
Here's how I debug Chrome Extension Popups.
- 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
debugger
statements. - HERE'S THE TRICK. Click on the Console part of the debugger and type:
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.
Yes, 'Inspect Popup' on the extension icon, and apart from that - from extension manager you can also inspect your options page.
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.
精彩评论