Node.js debugging with Chrome DevTools

Node.js debugging with Chrome DevTools (in parallel with browser JavaScript)

Serg Hospodarets BlogSeptember 29, 2016

Recently Paul Irish described how you can debug Node.js applications with Chrome DevTools.

Since that time Chrome DevTools have evolved and the step, where you had to open the separate page with a specific URL to debug the Node.js code, was removed.

It means, today you can debug your browser JavaScript files and Node.js ones in the same DevTools window in parallel, which makes the perfect sense.

Let’s take a look how it works.

What you need

1) Node.js 6.3+

You can install it directly from the Node.js site or switch to it using nvm (Node Version Manager)

Better to you use 6.6+ as Paul Irish mentioned in the comment, “in 6.4 there are a few flaky bugs”.

2) Chrome 55+

For that, you can download Chrome Canary

If you are using Atom, try this https://atom.io/packages/node-debugger

Enable a new way of Node.js debugging in Chrome

Currently the parallel debugging of the browser JavaScript and Node.js code is a new feature and now is qualified as an experiment.

To enable it, you have to do the following:

  • Open the chrome://flags/#enable-devtools-experiments URL
  • Enable the Developer Tools experiments flag
  • Relaunch Chrome
  • 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
  • Open/close DevTools

Debug

To start debugging, just open your page in Chrome and DevTools, as usually.

Start Node.js app

Start the Node.js in the debug mode. For that add the --inspect argument. E.g.:

node --inspect node.js

If you do this, you’ll see the output from Node.js, that it started in debug mode and an option to inspect the process opening a separate URL in Chrome:

alt

Debug in DevTools

But we want to debug it in parallel with our browser JavaScript, so switch back to your Chrome.

If you have any console.log or similar output in your Node.js application (outlined with blue on the previous image) , you can notice, that it already appeared in Chrome DevTools console:

After that, you can e.g. put breakpoints in both browser and Node JavaScript files and debug them.

I prepared a demo:

It contains a usual static server using Node.js (node.js file) and a page which just makes fetch requests to the pointed URL (the code is in the browser.js file).

You can try it to see how easily you can debug Node.js in Chrome. Just download the demo code from Github and run node --inspect node.js in its folder.

After that open http://localhost:8033/ in Chrome and so you can debug both browser.js and node.jsthe same time:

Other

As you see, you can put breakpoints in the Node.js code and output from Node.js apps goes to the DevTools console.

But there are many other abilities:

  • Live Edit: you can not only debug, but also change the files content
  • Profile JavaScript
  • Take snapshots etc.

Conclusions

If you use Node.js for your project, now you can debug and make changes for all your JavaScript from one place- Chrome DevTools.

You also can use all the power of Chrome DevTools applying it to Node.js code.

Source: https://blog.hospodarets.com/nodejs-debugging-in-chrome-devtools

Other sources for javascript debugging:

Debugging JavaScript:    https://developer.chrome.com/devtools/docs/javascript-debugging

NodeJS inbuilt debugger: https://nodejs.org/api/debugger.html

Node-inspector: https://github.com/node-inspector/node-inspector

Atom-node-debugger: https://atom.io/packages/node-debugger

Debugging Javascript In Depth – Egghead Lessons Reference

Egghead explains..

If you’re writing apps that are targeting the browser, you likely know the pain and joy that is debugging. The pain is part of the process, and the joy is winning the battle and fixing the issue.

The goal is to minimize the pain and maximize the joy. Let’s get to the end game as quickly as possible, eh? 🙃

Luckily the last several years have seen massive improvements for web developers when it comes to debugging their applications. The Chrome Devtools have gone from useful to absolutely amazing and essential when creating web apps.

You’re probably familiar with the basics of using Devtools, but there is a lot of functionality that is often overlooked. We are releasing three short courses from mykola bilokonsky that are sure to give you new tools that will help make the journey from debugging pain to joy more quickly!

Please follow the following 3 links to get expertised in debugging:

https://egghead.io/courses/chrome-devtools-sources-panel

https://egghead.io/courses/chrome-devtools-network-panel

https://egghead.io/courses/using-chrome-developer-tools-elements

Devtools source panel:

https://egghead.io/lessons/tools-examine-a-running-app-with-the-chrome-debugger?course=chrome-devtools-sources-panel

Press F12 in default and open devtools

Points to remember:

  1. Right click and click “Reveal in Navigator” – we can see the structure of your project
  2. Check Scope section in debugger for local, closure and global scope
  3. Add watcher expressions(above call stack) to find the value of variable that bound to. Click on ‘+’ button on watch section to add a variable that changes value on difference scope.

debugging-javascript

4. SourceMap: Unbundle your javascript with source maps. If you enable source maps then it breaks bundle.js file into chunks and display with your structure folder i.e., it represents in components. If you unaware of enabling source maps in devtools then google it 😉

debugging-javascript1

5.create snippets that allows developers to play with devtools

https://egghead.io/lessons/tools-use-snippets-to-store-behaviors-in-chrome-devtools

Devtools make life easier to programmers to see DOM changes instantly by creating snippets.

Goto Sources from F12, click on snippets. create a new snippet,save and run to see my alert box on my page. Simple right? Try at your end now.

debugging-javascript2

Simple example from Egghead:

debugging-snippet

chrome-devtools-network-panel:

Handle ajax requests(xhr) in devtools->network. Hope everyone knew to play and work on this. If not, please have a look at below link.

https://egghead.io/lessons/tools-examine-ajax-requests-with-chrome-devtools?course=chrome-devtools-network-panel

https://egghead.io/lessons/tools-analyze-http-requests-and-responses-with-chrome-devtools

You can test slow network performance using throttling in devtools. Say your website loads very fast with wifi in office. Now you want to test your application performance on mobile devices with 2G/3G/4G data. Now how do you test in that way? Just go to devtools, open network tab and select throttling that you required to test based on speed. Thats it.

debugging-javascript3

tools-analyze-overall-network-traffic-using-overview-tool-in-chrome-devtools

https://egghead.io/lessons/tools-analyze-overall-network-traffic-using-overview-tool-in-chrome-devtools

click on overview button shows a big bar with milli seconds graph.If you want to see requests/response at particular time..just click on that place to see all like shown below.

debugging-javascript5

chrome-devtools-elements-panel: