Node.js debugging with Chrome DevTools in parallel with browser JS | Hacker News Reader

Node.js debugging with Chrome DevTools in parallel with browser JS

blog.hospodarets.com

113 pointsmalyw23 comments

Note that --inspect has issues with Node 6.4+ at the moment: https://github.com/nodejs/node/issues/8155#issuecomment-2504...

I'm refreshing this tracker, maybe a dozen times a day

Just in Windows though

It's nice to see that Chrome and Node.js communities are working closely together. The --inspect flag was a huge improvement and makes Node.js a lot more attractive as a programming environment.

I've done quite a bit of research for Node.js debugging and the best and easiest is to use Visual Studio Code's built in debugger. It has breakpoints, local scope inspecting and other goodies.

This is definitely gona rock, if they ship it with the stock Chrome.

WebStorm also has those things and more afaik. Definitely has some other flaws though, even compared to PyCharm (one would think they'd be similarly well maintained).

I'd been meaning to try using Electron to debug/run both my node.js backend and my single page web app front end in the same process.

With using redux, you'd have a time travel-able single process server and client debug workflow. Headsplode.

Addendum: If I recall, when I try GWT way back in the day, they had somehow made it so you can develop your webapps in a single process using a Java debugger.

Yep. That's because in development mode, your client code was actually real Java running in an external process, and the GWT DevMode browser plugin intercepted JS execution and ran the real Java instead. It was great, especially if you were comfortable with Java/desktop development and not web dev (as I was at the time). However, the DevMode plugin died off around FF27 due to browser changes.

I did debug NodeJS backend (multiplayer games) with Electron.

It was very cool because I was able to see internal server state on simple HTML dashboard I made (for example I was able to see map with player positions or some important game variables etc.).

And I made some controls(buttons etc.) to dynamically change state on backend (for purpose of tweaking/experimenting/etc.).

So it was like turbo-debugging :)

> Open DevTools Setting -> Experiments tab (it started being visible after the reload)

> Press "SHIFT" 6 times (enjoy it ¯ \ _ (ツ) _ / ¯) to show the hidden experiments

> Check the "Node debugging" checkbox

(emphasis mine)

Out of couriosity, why all the jumping-through-hoops? You've already downloaded the canary build, activated a hidden flag to enable experiments and will have to enable that particular experiment. Why additionally hide it behind a cheat code?

For my money, VS Code has the best node debugging experience. As Chrome continues to blur the lines between browser/IDE it makes me think that eventually there will exist a Chrome "lite", which lacks a lot of features to save on memory/ easier on batteries, etc.

Unless I'm horribly wrong, the only thing a chrome lite would save is disk space.

These features only activate when you open dev tools. So any overhead to using them won't apply unless they are open.

And most browsers work this way. It also makes it a pain sometimes to debug performance issues. One specific time I was having issues with some CPU-heavy JS code in edge. It was taking 45 seconds to process an image, but only like 5 in other browsers. When I opened the edge dev tools, it would take 5 MINUTES to complete!

>As Chrome continues to blur the lines between browser/IDE it makes me think that eventually there will exist a Chrome "lite", which lacks a lot of features to save on memory/ easier on batteries, etc.

That's not how code loading works... Features like those are loaded on demand ("when used").

A lot of people make the same mistake conflating various program features that are orthogonal (and even the pages are loaded on demand, when needed) with increased memory usage and "bloat" in general.

I had been using devtool (https://github.com/Jam3/devtool) for similar effects, but this is awesome!

The important part here is not "be able to use devtools to debug node". It's "debug node & a browser tab in the same instance of devtools". E.g. you don't need to switch tabs.

This is really awesome/useful, thanks for making this quick tip post. Currently for this, you need Chrome Canary [1], but I wonder what the timeline is for getting this into the regular Chrome build!

[1] https://www.google.com/intl/en/chrome/browser/canary.html

Is there any way to get get good network debugging with Node? I really wish we had something like the Chrome Dev Tools networking tab.

If you like those, here are some other useful debugging tools:

https://www.youtube.com/watch?v=Fk--XUEorvc&feature=youtu.be...

I guess this use the new (Chromium) debugging API in NodeJS !?

https://github.com/nodejs/node/pull/6792

Saving for later...

"Chrome Canary is currently not available on the linux platform."

Dev channel for Chromium/Chrome (which is also on 55) has this experiment. You don’t need canary.

Reply on news.ycombinator.com