Search code examples
javascripteclipsedebuggingv8google-chrome-devtools

Node.JS debugging with Eclipse and Chromium Dev Tools V8

Eclipse is a you-love-it or you-hate-it tool for editing Javascript files. For me, it's both.

Anyway, I often prefer the SPKET JS editor plugin for Eclipse over the default one because of small details like object knowledge and included file code completion.

However, when using the V8 debugger from Chrome Dev Tools for server-side JavaScript like Node.JS, it opens a third editor Chromium (from the browser) for code stepping.

I would like everything in one tab, so I tried opening my files with the JS editor from the V8 tools, but the name in the tab is now hidden (try editing multiple files this way) and a new one opens up on debugging anyway*.

(* Note that PHP debugging has a similar problem, but it opens a new instance from the same PHP editor)

Chromium JS editor | SPKET JS Editor | Eclipse JS Editor enter image description here

Also, I don't know if this is node-specific or Eclipse-specific, but node --debug doesn't seam to do anything, no variable outlining, no breakpoints. Whereas node --debug-brk does as expected. So either Node.js is weird, Eclipse is, I've missed the point or I've set up debugging wrong.

Could anyone elaborate on debugging server-side JS in Eclipse and using the most complete JS editor, so that:

  • JS editor is aware of functions inside objects and separate files like SPKET (Often the case in modern implementations like Node.js) but preferably free for any use (like Chromium Dev Tools)
  • Eclipse keeps code and debugging in the same tab (if at all possible)
  • Tabs keep the name of the files (bug or wrong setting?)

I am running Eclipse Indigo 3.7.2 with Google Chrome Developer Tools SDK WIP + remote debugging + JSDT bridge and - if relevant - optionally SPKET 1.6.20 IDE, on Ubuntu 12.04 x64.

--edit--

At least I figured out where to put the breakpoints. Not in the editor, but in the debugger. Open the Project Explorer:

Window -> Show View -> Other... -> General -> Project Explorer

In Project Explorer -> Select your debug item -> Open proper JS file -> enter image description here THIS is where you want to add breakpoints.

Solution

  • ChromeDevTools by default has its own separate .js files for debugging. If you want to have debugger stepping in your files, you would need to set this up: http://code.google.com/p/chromedevtools/wiki/FeatureDebugOnRealFiles