CODEWITHSUNDEEP
javascriptdebugginggoogle-chrome-extension
Skizit
Skizit

Reputation: 44842

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 correctly. How to debug a problem in that popup file?

Upvotes: 80

Views: 32265

Answers (6)

Tonecops
Tonecops

Reputation: 167

One way to get the popup.js to be debugged is to let it first do its popup by pressing the extension icon at the tool bar. Then right click the popped window to get "Inspect" choice and the developer window opens. But then you need to be able to reload the page to get initial javascript breakpoints to work. At that developer page find Sources->Page then right click: Select 'Open in new tab'. Then open Devtools on that new full page and you can reload: enter image description here

Upvotes: 1

hypers
hypers

Reputation: 1250

Try switching Auto-open DevTools for popups in the bottom right of DevTools Settings:

Auto-open DevTools

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.

Upvotes: 2

Pavel Hlobil
Pavel Hlobil

Reputation: 1782

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.

Upvotes: 40

Tom N
Tom N

Reputation: 1828

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.

Upvotes: 108

aCode
aCode

Reputation: 64

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

Upvotes: 2

TimCodes.NET
TimCodes.NET

Reputation: 4699

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

Upvotes: 139

Related Questions