Debug popup.html of a Chrome Extension?

Solution 1:

Right click the extension's button, then 'Inspect Popup'

Solution 2:

Inspect Popup has gone away with the latest build.

Here's how I debug Chrome Extension Popups.

1. Click your popup button to see the webpage (the popup window itself).
2. Right-click in the window and select Inspect element
3. The Chrome Debugger window comes up with the right context, but you've already missed your breakpoints and debugger statements.
4. 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.

Solution 3:

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.

Solution 4:

Yes, 'Inspect Popup' on the extension icon, and apart from that - from extension manager you can also inspect your options page.