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.

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.

Answer 2

Put the following command in your script:

debugger;

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

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.

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