Node Js debugging with Chrome Browser DevTools

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

Chrome DevTools update debug parallel of the browser JavaScript and Node Js file.

Let’s take a look at how it works.

You have to need:

• Node.js 6.6+: You can install it directly from the Node.js site.
• Chrome 55+:  For that, you can download Chrome Canary.

Now Enable a new technique of Node.js debugging in Chrome.

Now We can debug parallel of the browser JavaScript and Node Js. it is also qualified as an experiment.

To enable it, you have to do the following steps:

Step 1: Open the chrome://flags/#enable-devtools-experiments URL.

Step 2: Enable the Developer Tools experiments flag.

Step 3: Relaunch Chrome.

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

Step 5: Press "SHIFT" 6 times (enjoy it ¯ \ _ (?) _ / ¯) to show the hidden experiments.

Step 6: Check the "Node debugging" checkbox.

Step 7: Open/close DevTools.

Debugging

Open your page in Chrome browser and DevTools as usually.?

Start your Node.js app

You have to start Node Js app in the debug mode. For add the --inspect argument. e.g:  

node --inspect node.js

You will see the output from Node.js in debug mode.

DevTools Debugging

You have to switch to your chrome browser for debugging parallel with JavaScript file.

If you have any console.log or other output in your Node js application you can see that it will already appear in chrome DevTools console:

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

Open this http://localhost:8033/ in Chrome and so you can debug both browser.js and node.js the same time:

Conclusions:

When you use Node.js app for your project. Now you can debug and make changes for all your JavaScript from one place- Chrome  browser DevTools.