Quick tip for debugging Chrome Extensions

I'm working on a new Chrome extension now (mainly as an excuse to avoid writing this article I'm supposed to turn in), and ran into an interesting problem. I was making use of console.log to debug the extension and noticed it didn't show up in the main console. I figured that made some sense. A user may have a bunch of extensions and you wouldn't want them adding noise to your console. However, I saw examples of extensions that made use of the console so I figured they had to show up somewhere.

This tutorial on the Chrome Extensions site mentioned right clicking on your extension icon and selecting "Inspect popup". But my extension didn't have an UI and that option wasn't available. I then noticed something on the Extensions page:

See the link by "Inspect views"? Clicking that fires up a Developer Tools window just for your extension. It's like Chrome was smart enough to recognize that there wasn't a real background page and generated one for you.

Sweet.

Archived Comments

Comment 1 by Schmulik Raskin posted on 8/1/2012 at 2:32 AM

Hi! I had the same issue too. Thing is, this solution is good if you need to debug background code. Where I'm having a issue is debugging startup code in a popup, because there doesn't seem to be a way to keep the Developer Tools window opened while the popup is closed. Any thoughts?

Comment 2 by Schmulik Raskin posted on 8/1/2012 at 2:49 AM

Hi! Just wanted to add that I found another workaround for debugging popups: You can open the popup page in a regular chrome tab, using the 'chrome-extension://<Extension ID>/path/to/popup.html' URL.

Comment 3 by Raymond Camden posted on 8/1/2012 at 4:57 AM

Thanks for sharing that!