DebuggerTutorial

Install

First you have to install Eclipse platform from eclipse.org. Eclipse comes in many different configurations, the Debugger requires “Eclipse platform” or richer. You also could give a try to “Eclipse IDE for JavaScript Web Developers” (JSDT) configuration that provides JavaScript IDE, though it has its limitations.

Then you have to install Debugger into Eclipse.

Start Eclipse and open menu Help | Install New Software....

Add update site http://chromedevtools.googlecode.com/svn/update/dev/.

You should find “Google Chrome Developer Tools” category in the space below. Under this category choose “Chromium JavaScript Remote Debugger” and optionally debugger bridge to JSDT (only if you have JSDT installed).

Finish installation and restart Eclipse as prompted.

See also HowToInstall.

Connect

In Eclipse create a new debug configuration (under Run | Debug Configurations...) (you might need to switch to the Debug perspective first). Several configuration types are supported for different protocols.

(Note that failing to see these configuration types is very likely a sign of incorrect Java VM version).

WebKit Protocol

This is default Google Chrome/Chromium debug protocol: WebKit Remote Debugging Protocol. You should start browser with the following command-line:

chrome --remote-debugging-port=<debug port>

Standalone V8 VM

This is for the native V8 debug protocol. There is no standard way to enable it, as V8 is only a library and doesn't control it. A particular application is responsible for this.

Chromium JavaScript

This is what historically was the first Google Chrome/Chromium debug protocol. It is being phasing out so you probably won't need it.

Once you chose a configuration type, all other settings should be pretty much the same.

However note that for "WebKit Protocol" you will have to manually choose a backend (see main article).

Then specify the debugger port you have chosen, in the "Remote" tab.

Press “Debug”. If the browser has multiple tabs opened, a corresponding tab chooser dialog will appear. Unless something went wrong, debugger should attach soon and a new object called launch should appear in Debug view (make sure you are in Debug perspective by now).

Note that you can also connect to other V8-based applications via “Standalone V8 VM” launch type, provided they have debug support embedded.

First Steps

After debugger attached you should find a VirtualProject (in the Project Explorer view). That's where all running scripts are.

Set a breakpoint on the function you are interested in. Note that it might be important to set correct breakpoint type, especially when some other debugger or language support is installed in the same Eclipse. Choose Chrome/V8 breakpoints in Run | Breakpoint Types menu item in this case.

Make the function with breakpoint run (for example provoke it by clicking something on the webpage) – program should stop there and debugger will put a cursor on the breakpoint line. You also can stop the program by pressing “Suspend” button in Debug view.

Explore current call stack. Check local variables or try some expressions. If you have an object, you can expand it in Variables or Expressions view and see its properties. Its proto object is shown under __proto__ property. If the object has “toString” method, you can see the object string representation in the same view.

If you encounter some value of function type (e.g. some method or a callback), you can navigate to its source: choose Open Function in the context menu. At the same time if you want to see the function you paused in as an object, create new "arguments.callee" expression.

If you want to keep an eye on a particular object, you can pin-point under some global object property.

Whenever you see a bug in your program you can edit it and also you can try a live editing – once you fixed the bug save changes and in the editor context menu try V8Debugging | Push Source Changes to VM. This will put your changes right in the running program. V8 cannot do a magic, but in many simple (or not so simple) cases it should work and you won't have to reload your page. The debugger doesn't have to be paused for this to work.

See also full feature list.

Setting up your sources

You may expect Debugger to work with your local working files rather than scripts in the VirtualProject. You can do so as described here.

How to Spy On How It's Working

What you most easily can do is to overlook our network communication. In launch configuration enable “Show debugger network communication console” (see picture above).

[Anonymous]

Originally posted by: neur...@gmail.com

I've been trying to get these working for 2 days and no glimpse of success... Eclipse just hangs at "Launchig site foo 922 48%" for some minutes, then inevitably follows "An internal error occurred during: "Launching chrome debug". java.lang.NullPointerException?".

Is this a bug? Should I report it... or am I doing something wrong?

[Anonymous]

Originally posted by: neur...@gmail.com

...do I need local http server? I keep seeing "http://server:8080/misc/" or similar examples instead of plain localhost? I just want do debug and edit my javascript source files while they rune in the chrome browser? Is this what chromedevtools is supposed to provide? "source mapping" seems very confusing... I just have some javascript files and a html file in folder and I want to debug the javascrip and also edit the real source files while doing this, otherwise I see no point in using eclipse...

[Anonymous]

Originally posted by: peter.ry...@gmail.com

neur...@gmail.com:

1. This is definitely a bug. Please submit it in "Issues" with stacktraces and versions (both Debugger and Chrome).

2. No, you don't have to run a sever. You can simply open your web-page from disk. In this case your scripts will have URLs like this: "<file: home="" user="" ....="" util.js="">". I agree that source mapping is involved, but unfortunately you have to set it up. This is the only way how debugger can accurately match scripts in browser with files in Eclipse. Yes, this is the idea behind debugger: IDE experience, when you debug and edit the very same files.

Hope this helps. Please feel free to ask further. Peter

[Anonymous]

Originally posted by: adrian.a...@gmail.com

I basically got debugging of a chrome extension working in my eclipse indigo installation.

"Show debugger network communication console" helped initially to see whether chrome and eclipse are talking.

I also get the virtual project JavaScript?? Source Name Mapper configured and working.

But now to the point: How is the Edit-Debug cycle supposed to work for chrome-extension source code edited and debugged in eclipse? What I do is this:

1. Make a source-code change in the JavaScript?? project in eclipse and save it.
2. Under chrome://extensions/ in the browser I press the Reload link on the extension in question (it was "Loaded from: {eclipse workspace project location}")
3. I visit the extension target page (e.g. a gmail browser tab dispalying a draft) and reload it as well to activate the modified extension code.
4. Finally I am able to debug the source code change I did under 1.

Am I working too hard here?

Is this really the status-quo of chrome-extension edit/debug?

Thanks for any hints, Adrian

[Anonymous]

Originally posted by: peter.ry...@gmail.com

Thanks for the feed back! Do you mean that connecting without "communication console" is a bit of discomfort currently?

As to you question, at the first glance that's how it works. But let me talk more with chromium guys. Have you also tried live editing for extension code? Theoretically it should work.

Peter

[Anonymous]

Originally posted by: chrisbjohannsen

Scripts icon disappeared from Chrome Debugger after install. How do I reset Chrome to default settings so I can continue working without Eclipse plugin?

[Anonymous]

Originally posted by: peter.ry...@gmail.com

Your Chrome must still be running with "--remote-shell-port" option. You cannot override it by staring another Chrome instance. Close all Chrome processes and start it again without the option. This should help.

[Anonymous]

Originally posted by: grizzly...@gmail.com

Sorry, i fixed it, it was problem on my part(aptana), it works fine in eclipse 3.7. Can i somehow make it autopush to VM when i save file? And can i somehow avoid clicking Yes to amek it writable after every push to VM?

[Anonymous]

Originally posted by: peter.ry...@gmail.com

Glad to hear this. As to your request, currently this is not supported. I filed an issue per your request: http://code.google.com/p/chromedevtools/issues/detail?id=47

[Anonymous]

Originally posted by: mike.cop...@gmail.com

I have everything set up according to the instructions above. However, when I set breakpoints the execution never stops at them and they are not saved after my debug session is over. Is this designed to allow a developer to step over & step into etc?

[Anonymous]

Originally posted by: peter.ry...@gmail.com

Hi Mike.

Did you use scripts from a VirtualProject or you had your own files before debugging and you configured them in source look-up?

• If VirtualProject files: breakpoints are expected to work, but they are never saved because VirtualProject only lives for a single debug session.
• If you used your own working files, it is important that you set a correct breakpoint type from Run menu, but breakpoints are expected to persist in any case.

Peter

[Anonymous]

Originally posted by: mike.cop...@gmail.com

Well, I tried both. Ok, That makes sense that breakpoints are not saved for the virtual project, so lets focus on my own working files. The working files point to my files on my localhost in MAMP/htdocs . So I try to run a debug session using the Chrome 9222 Mysite Debug configuration I set up, but breakpoints are never reached. I do notice the virtual project is always started even though I run debug from MY project files. 'm not sure what you mean by "correct breakpoint type from Run menu" - can you please explain that? thx - Mike

[Anonymous]

Originally posted by: peter.ry...@gmail.com

It's a common deal with breakpoint types that we should probably highlight better. See EclipseDebuggerFeatures#Selecting_Breakpoint_Type? for details.

How have you set up your source look-up? Was it 'Auto-detect' (better) or 'Exact match'?

With 'Auto-detect' your breakpoints (of correct type) should work. However you'll have to manually list your folder under a Sources in debug configuration so that debugger highlighted your files.

[Anonymous]

Originally posted by: peter.ry...@gmail.com

The is a correct link.

[Anonymous]

Originally posted by: mike.cop...@gmail.com

Thanks for the info but, still not working. Must be something I'm missing Here is what I do:

1. Run Chrome with --remote-shell-port=9222

2. open url http://localhost:8888/my_project_folder/

3. From Eclipse: I debug my project: right click my project > select Debug As > Debug Configurations > select the Chromium Javascript debug configuration. In Source tab I added the path to my files (mamp/htdocs/my_project_folder)

4. In the debug perspective, I select > Run > Breakpoint types > Chrome / V8 Breakpoints

still no luck. ****Is it possible that the debugger is confused because my Source files are the ones that are currently being run by Chrome?

[Anonymous]

Originally posted by: mike.cop...@gmail.com

also do you have to list each source folder or just the parent folder?

[Anonymous]

Originally posted by: peter.ry...@gmail.com

Here's what can be done:

• Please confirm that your debug configuration is in Auto-detect source look-up mode (first tab in debug configuration)
• When debugging, open your file properties and in "V8 JavaScript? Script" page check what debugger tells about remote script for this file.
• When debugging, in "Breakpoints" view (near "Variables") open "Breakpoint Properties" and in "Technical Info" page check what debugger think about your breakpoint (must be something about regexp).
• In debug configuration enable "Show debugger network communication console" (make require Eclipse restart) and in protocol dump console check that setting a breakpoint actually causes remote message roundtrip.

As to each folder/parent folder, I guess you are choosing "Workspace Folder" container type, it has "Search subfolders" options that governs this.

[Anonymous]

Originally posted by: don41...@googlemail.com

Same problem over here. I got the chrome 18.0.1025.14 (german) and got a NullPointerException? after trying to connect. Chrome Dev Tools:

ChromeDevTools? SDK WIP Backends 0.1.6.201202250216 Chromium JavaScript? Debugger Bridge to JSDT 0.3.4.201202250214 Chromium JavaScript? Remote Debugger 0.3.4.201202250214

[Anonymous]

Originally posted by: pletnev.rusalex

I have the same problem: java.lang.NullPointerException? Fedora 16 Eclipse SDK Version: 3.7.0 Build id: I20110613-1736 Chrome: 18.0.1025.162 ChromeDevTools? SDK WIP Backends 0.1.6.201202250216 ChromeDevTools? SDK 0.3.4.201202250214 Chromium JavaScript? Debugger Bridge to JSDT 0.3.4.201202250214 Chromium JavaScript? Remote Debugger 0.3.4.201202250214

[Anonymous]

Originally posted by: peter.ry...@gmail.com

Guys, could you please submit the NPE as an issue in issues http://code.google.com/p/chromedevtools/issues This is a wiki-page. I would also need a stack trace if possible. See also http://code.google.com/p/chromedevtools/wiki/HowToReportProblem (and if you don't see a stack trace). Thank you

[Anonymous]

Originally posted by: andy.war...@gmail.com

I received a NullPointerException? as well. It went away when I enabled “Show debugger network communication console” in the Debug Configuration (shown in picture above), and now it's working fine for me.

[Anonymous]

Originally posted by: peter.ry...@gmail.com

Yes, this is this one: http://code.google.com/p/chromedevtools/issues/detail?id=65