44

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.

Community
  • 1
  • 1
Clayton Hughes
  • 1,015
  • 2
  • 9
  • 22
  • 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. – Joel May 21 '09 at 23:21
  • In Chrome debugger, go to Console, select Top dropdown to select your extension – onmyway133 Aug 03 '23 at 20:50

4 Answers4

48

Put the following command in your script:

debugger;

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

Amandasaurus
  • 58,203
  • 71
  • 188
  • 248
47

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 enter image description here

Then select 'Content scripts'

enter image description here

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.

soupy1976
  • 2,787
  • 2
  • 26
  • 34
  • 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. – Clayton Hughes Feb 13 '14 at 17:57
  • You no longer need to know the extension id. They're now listed by name. – Teepeemm Dec 01 '15 at 15:00
  • 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 https://www.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 – Chris Moschini Nov 25 '16 at 18:00
8

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.

Scott
  • 654
  • 5
  • 10
  • 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); – Clayton Hughes May 22 '09 at 00:39
  • 2
    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. – Scott May 22 '09 at 05:34
  • 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? – Clayton Hughes May 22 '09 at 18:56
  • I installed the sample GMail checker extension http://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. – Scott May 22 '09 at 20:31
3

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

sym3tri
  • 3,747
  • 1
  • 29
  • 25