Debug node. js and JavaScript directly using Chrome devtools (parallel)

good News: Now we can debug node. js with our browser!!!

Premise

• node. js 6.3+, which can be downloaded on the node. JS website;
• Chrome 55+. If your local chrome is upgraded to the latest version or <55, you can download it here: Chrome Canary, pro-Test.

Configuration

For now, parallel debugging of JavaScript and node. js in the browser side is a new feature, a new experience. To be able to work properly, you need to configure the following:

• Enter url:chrome://flags/#enable-devtools-experiments. Note: If you are using the Chinese version of Chrome, the name of the configuration item displayed should be: 开发者工具实验性功能 , such as;
  
• Enable it;
• Restart Chrome;
• Open DevTools Setting, Experiments page card;
• Locate Node debugging , and tick the box.

You should finally see something similar, indicating that the environment is ready:

Debugging

Debugging is very simple, like the normal JS file, using Devtools for breakpoint debugging.

Run the node. JS App

You need to run the node. JS app in debug mode, as simple as adding the –inspect parameter.

1	Node--inpect server.js

Note: Server.js for my own application files, custom, in the ' node. js '. If it goes well, you should be able to see similar information:

After running, you can see that there are server.js applications in DevTools, Sources :

After you expand, you can view the JS file for your current node app, so that you can already use Chrome for parallel debugging operations.

At last

With this new version of Chrome, there are many other features, such as modifying file content, saving file snapshots, and so on during debugging.
Finally, thank the original author Serg Hospodarets for sharing, Thank you!

Debug node. js and JavaScript directly using Chrome devtools (parallel)