77

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?

brasofilo
  • 25,496
  • 15
  • 91
  • 179
Skizit
  • 43,506
  • 91
  • 209
  • 269
  • Documentation for the records, Tutorial: Debugging: https://developer.chrome.com/extensions/tut_debugging – brasofilo Feb 13 '16 at 04:08

5 Answers5

133

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

TimCodes.NET
  • 4,601
  • 1
  • 25
  • 36
  • 7
    In Chrome 22 (Canary on 8/1/2012), the 'Inspect Popup' option has been removed, probably because you can 'Inspect Element' from within the popup. However, because of this, there is no way to debug/set a breakpoint on code that runs on load. So far my only solution is to put a setTimeout for 10-15 seconds, which allows me time to open the popup, select 'Inspect Element', find the Scripts tag and set the breakpoint inside the timed-out function. Do you know of an easier way? – Schmuli Jul 31 '12 at 22:08
  • 5
    I don't know, sorry, I wish the chrome team would stop breaking things. – TimCodes.NET Aug 01 '12 at 16:59
  • 13
    inspect the popup windows itself and then use location.reload(true) to relead it – David Dehghan Sep 27 '13 at 03:12
  • 3
    `Inspect popup` is verified present in version 38, possibly in earlier versions as well. – Lars Viklund Oct 26 '14 at 14:26
  • 1
    This seems outdated. Please consider @Tom N's reply below. – lephleg Nov 19 '17 at 19:04
  • It works but there is anyway to bring the console into the front of the webpage or docking it inside the current webpage? @TimCodes.NET – Ponpon32 Jan 04 '18 at 12:11
99

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.

Tom N
  • 1,738
  • 12
  • 4
  • I do get the popup when I rightcilck on the page action icon. – ripper234 Nov 23 '12 at 01:06
  • 5
    You can also just hit F5 while in the debugger, it triggers "reload" not "run". Though this should be considered as UI bug, since developers would expect F5 to "run", not "reload". So, beware of this helpful F5 has messed up some debuggings of mine too when hit at the wrong time. The latter also happens in Firefox. – Roland Pihlakas Aug 30 '15 at 00:07
  • 1
    In Chrome 47 not hitting breakpoints on extension load is still a problem, so your location.reload(true) tip is priceless! – Eric Majerus Aug 31 '15 at 01:37
  • This is a great workaround. Very often "Inspect Popup" will not hit breakpoints. – DShultz Aug 02 '18 at 17:45
38

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.

Pavel Hlobil
  • 1,762
  • 1
  • 15
  • 22
  • I tried it and it works if your extension is a popup. Here is an example of AdBlock popup link that runs in the browser. You must have AdBlock installed. chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/button/popup.html – Pavel Hlobil May 10 '13 at 17:18
  • This is especially nice because Chrome reloads the popup page every time you click the toolbar button, and the "Inspect Popup" console is automatically closed whenever the popup is blurred. – chbrown Oct 23 '14 at 18:15
  • Some extensions do not have popup.html. You have to know the file's name before debugging. – Brian Aug 22 '15 at 08:03
  • Sweet! This and [Tom N answer](http://stackoverflow.com/questions/5039875/chrome-extension-debug-popup-html/12068406#12068406) are priceless. Accepted answer is not the best, at all. – brasofilo Feb 13 '16 at 04:03
  • THANK YOU @PavelHlobil ! – james075 May 19 '16 at 16:05
  • 1
    This totally gets around the issue of not being able to see initial requests in DevTools when the extension is first opened. Thanks! – docta_faustus Jul 03 '18 at 05:15
2

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.

hypers
  • 1,045
  • 1
  • 12
  • 30
2

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

aCode
  • 64
  • 1