Google Chrome Javascript Debugger and Content Scripts

Question

This question has been asked similarly before, but I can't seem to debug Javascript in Google Chrome.

If I go to Page > Developer the "Debug Javascript" (Ctrl+Shift+L) is disabled. Alt + ` doesn't work.

I'm developing a 'content script' extension so I'm launching chrome with --enable-extensions.

What I'd ideally like to do is set breakpoints and step/run through my script as it executes. I'm a little over my head when it comes to JavaScript, so any guidance is appreciated.

I can get to the 'JavaScript Console,' but can't find the content scripts inside of that. I'm also not sure how that differs from the 'JavaScript Debugger.'

I'm using the latest Dev build of Chrome (2.0.181.1) on Windows XP.

Jackinthepulpit

you may put down the version of windows you are using: XP, Vista, 7RC... I know Chrome and Windows 7 don't get along especially well. – Coquette

In Chrome debugger, go to Console, select Top dropdown to select your extension – Baecher

Answer 1

These answers all seem to be out of date, and since this is ranking highly in google, here's the up-to-date answer:

In Chrome press CTRL+SHIFT+i to bring up the developer tools.

Select 'Sources'

Click the small arrow that allows you to select from the scripts

Then select 'Content scripts'

You'll then need to know the id of your extension (available from the chrome manage extensions page) to get to your scripts and debug them as normal.

Dysphasia

Wow, blast from the past. I don't really remember anything about this question / developing Chrome extensions, but this seems like a solid answer. Thanks for chiming in. – Jackinthepulpit

You no longer need to know the extension id. They're now listed by name. – Venereal

Also if you screw up the content_scripts section of your manifest you simply won't see your content script listed, erroring silently. For example if you wanted to load one for Facebook and put only facebook.com in content_scripts, you'd end up not having it load anytime you weren't on the homepage (no trailing asterisk) or were on links that included the mobile domain (m.facebook.com), etc – Macrogamete

Answer 2

Put the following command in your script:

debugger;

That will launch the Javascript debugger when it gets to that point

Kurdistan

Does firebug support this any chance? – Zeniazenith

I think this works in Firebug. Why not try it and reply back here if it works? :) – Kurdistan

Answer 3

Right-click and select Inspect Element, there you'll find the JS debugger, among other debugging tools. The JS debugger should allow you to set breakpoints, etc.

Chamomile

Well, this is the JavaScript Console, not the debugger. There seems to be a difference. I'm likely being dense here, but I can't find a way to insert breakpoints into the script at this point. How do I see a content script function that I've added as an Event Listener to a particular object? e.g. I want to be able to debug 'myFuncHere()' in this.addEventListener('click', myFuncHere, true); – Jackinthepulpit

If you click the "Scripts" button at the top of the Inspector window, that should be the debugger. You can select a particular script source from a drop down menu and then click on the line number to set a breakpoint. – Chamomile

Thanks for the tip, Scott, but I don't see any of my user scripts there, just the ones from the website proper. Am I missing something? – Jackinthepulpit

I installed the sample GMail checker extension dev.chromium.org/developers/design-documents/extensions/samples and by right clicking on the installed button at the bottom was able to select 'Inspect Element" which brought up the inspector / debugger scoped to just the extension. – Chamomile

Answer 4

What you have to do is enable your extension, then in Chrome click "Developer" -> "Javascript Console". Then click the "Scripts" tab. After that you should see a listing just below of all the loaded scripts. You will see scripts for the current page as well as all the scripts for any extensions you have installed. (If you don't see any scripts listed after opening the console, you may have to refresh)

It seems that all Chrome extensions get assigned a unique ID. You can find out your ID by viewing the Chrome Extensions page in Developer Mode.

Then it's just a matter of searching through the scripts in the dropdown for your script. Select your script and you can set breakpoints etc.

There's a lot more info on the Chrome Dev Tools here: http://www.chromium.org/devtools

Brougham