Debug the Node program

This article may be a bit long, because debugging Node is really torture for a long time, of course, finally found a satisfactory tool, look at the following picture!!

What is contentment?

  1. Hot update
  2. Console view the output object (command line to see the js output object is a nightmare)
  3. Easy to debug, including but not limited to: breakpoints, running single files, etc…

The above image looks like the Chrome console, but it’s definitely more than just the one that inspect-brk opened

Interested can see the following tool comparison, if you want to directly achieve the effect of the above image directly find the NDB directory to ~

Hot update stands for Nodemon

::: tip Advantages: File can be updated immediately after modification fast response :::

::: Danger disadvantages Do not support breakpoint debugging is not friendly to Object output (as long as multiple layers are nested, it becomes [Object]) :::

The installation

npm i nodemon -D
Copy the code

package.json

"scripts": {
  "dev":" ./src/index"
}
Copy the code

run

npm run dev
Copy the code

chrome devtools

This is the most way to say on the Internet, the article is all CV, this is totally not debugging ok… Let’s just say it’s handy to look at the variables

  • advantages

    • Object output friendly
    • Support for breakpoint debugging (but very weak)

  • disadvantages

    • Hot updates are not supported and the code must be rerunned each time it is changed
    • Can not automatically open the debugging interface, have to manually open

The installation

Do not need to install

run

Node -- inspect. / SRC /index.js
#orNode --inspect-brk./ SRC /index.jsCopy the code

To view

After running node, open Chrome ://inspect/# Devices

After the node node appears, click Inspect (every time you rerunning the node, you have to find the corresponding inspect node, not rerunning it from the currently open console).

Debug using vscode

  • advantages

    • Support for breakpoint debugging
    • Hot update support
    • View variables

  • disadvantages

    • Although support to view variables, but every time you have to break the point to see, not intuitive console

The boot mode is as follows:

  1. Open the debugging panel of VSCode and click Settings. The.vscode/launch.json file will be generated automatically

  1. Hot updates are not supported by default, but we can use them insteadnodemonTo start the Node program and make it support hot updates. This is where Nodemon needs to be installed globally.

The configuration file is as follows: For more information, see go.microsoft.com/fwlink/?lin…

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0"."configurations": [{"type": "node"."request": "launch"."name": "index"."restart": true.// Modify the code and save the code will automatically restart debugging
      "runtimeExecutable": "nodemon".// What command to execute app.js with nodemon
      "console": "integratedTerminal".// when the stop button is clicked or the code is modified and saved, the debugging is automatically restarted while nodemon is still running. This can be solved by setting the console to integratedTerminal
      "skipFiles": ["<node_internals>/**"]."program": "${workspaceFolder}\\src\\index.js"}}]Copy the code

Debug using devTool

Devtool is not a chrome browser, but a browser console.

If you’re familiar with or have heard of Electron, electron packages the front-end code as a desktop application. The underlying code is still the browser, and since it’s a browser, there’s a console.

So the devtool NPM package is a very clever way to package devtool

For more information: github-devtool

  • advantages

    • Support for breakpoint debugging
    • Hot update support
    • View variables
    • Variable output friendly
    • Chrome plugin support!!
    • View node performance!!

  • Danger shortcomings

    • 😭 is too small!!
    • The Network panel does not work

The installation

Because it relies on electron, the installation package is very large. Fortunately, CNPM has included this package. Basically, CNPM is required to install it

npm i devtool

#The network is not good use CNPM
cnpm i devtool
Copy the code

run

#Since I didn't install the global, I installed the project, so I started with NPX
npx devtool ./src/index.js --watch

#You can also add the command to the package.json file
# "dev":"devtool ./src/index.js --watch"
npm run dev

#It has been installed globally
devtool ./src/index.js --watch
Copy the code

Watch means hot update.

Devtool uses the Chrome plugin

I won’t go into details about many of the devTool configurations, but it’s best to look at GitHub in detail, and record the use of plug-ins

  1. New root directory.devtoolrc. This way devTool will automatically read the configuration (either set it on the command line or specify a configuration file)
{
  "devToolsExtensions": ["./chrome-devtools-zerodarkmatrix-theme/theme-extension/"]}Copy the code
  1. Looking for a plug-in

Seeing that DevTools Tensions is just a list of Chrome plugins, I’m going to change the DevTool style as an example of a set of styles that are available for the app store, zero-base-themes

We need to find the source code for the plug-in, usually the plug-in is open source Maurice Ruz/Chrome-Devtools-Zerodarkmatrix-Theme

Download down the source code, cozily put the root directory directly. The plugins have manifest.json files, so you find the theme-extension directory

  1. Run devtool

This run has not yet taken effect because it is a style plugin, so you need to Enable Developer Tools experiments

On the console, go to Experiments>Allow Custom UI themes and check them. If you don’t see them, press Shift five times to hide them. (This is electron’s console, after all, so the hide option is already on)

  1. Restart devtool

You can see that the style has been changed, and the runtime will tell you which plug-ins have been loaded

The protagonist NDB

  • Tip # advantages

    • Support for breakpoint debugging
    • Hot update support
    • View variables
    • Variable output friendly
    • View node performance!!
    • You can use the mouse to control the console zoom (fonts can be enlarged)
    • Castrated version editor (no smart hints for writing code)
    • Network panel Issues are supported
    • Panel changes will be synchronized to the local code, including new files are ok
    • Automatically identify the package.json script command
    • The NDB tool will be updated synchronously as the code changes
    • Google, and more support should follow

  • disadvantages

    • Hot updates are not supported (although there is a run button and you can right-click to run individual files)

The installation

I forgot whether the following steps require Python support or not. I didn’t get the screenshot, but I installed them anyway

npm i ndb -g
Copy the code

The first time I run it, an error is reported. Let me install Python. However, this error is caused by a nod-gyp. js library with a pot behind it, so Python should be able to ignore it

If this appears, it will be OK. I installed a few more times, did not report the error. I took

Note the Python installation handle

Download address:

www.python.org/downloads/

It should be restarted after installation

Experience and recommendation

Each tool has its own advantages and disadvantages. It is best to choose the one that suits you

The following is only personal opinion, don’t spray if you don’t like ~

If there is a better tool/way to improve it, please let me know!

First place. NDB

First push NDB, because at least it is Google in the maintenance of the project, network panel looks fast, can not hot update the problem is not big, at most click again to run, still acceptable

Most importantly, the entire interface can be zoomed and the font is not too small…

Second, devtool

The speed of hot updates and support for add-ons on the Same Console as Chromium is incredible! Unfortunately, I can’t see the network request. The font size is too small

To solve the font problem, I have tried to change the code of the style plug-in and the configuration of Elector, but it doesn’t help. The big screen is ok, but if the laptop screen is developed, the face with small font has to be close to the screen to see it.

The third recommendation is.vscode

Vscode is very friendly for debugging this area, with the nodemon hot update plus, but it is really hard to see the objects that are printed. If you use node to write a simple crawler, you will either not see the HTML nodes, but you can see them after using json.stringify (). But the prototype chain is all displayed, several screens can not read through

Every time you want to look at a variable, you have to interrupt it, and then go to the next step manually, which is really not interesting.

Nodemon is recommended

Because the inspect experience was so bad, Nodemon wasn’t finished yet