Node V6.3 + provides two debugging protocols: THE V8 Debugger Protocol and the V8 Inspector Protocol. You can use third-party clients/ides to monitor and debug Node(V8) processes.

v8 Debugger ProtocolDebugger is a popular third-party debugger that uses a TCP port (usually 5858) to interact with the Client/IDE
node-inspectorIt’s based on this protocol.
node-inspectorDespite the name Inspector, the actual use is early
v8 Debugger Protocol, its working principle is as follows:


1. Start your JS script with node –debug=5858 yourscript.js, and Node will use 5858 as the debug port when running the script


2. Start the Node-inspector, which opens a background process that provides HTTP services through port 8080.


3. Open the browser
http://127.0.0.1:8080 /?port=5858It connects to the Node-inspector daemon and tells the daemon to connect to the Node process that uses port 5858 as the debug port. A UI debugging interface similar to Chrome DevTools is provided in the background.

V8 Inspector Protocol is a debugging Protocol added to Node V6.3 that interacts with the Client/IDE via websocket (usually using port 9229). At the same time devTools based on Chrome/Chromium browser provides a graphical debugging interface.

Open the debug

Single process

Start yourScript with node –inspect=9229 yourscript.js, where 9229 is the specified port number

Multiple processes

  1. ExecArgv can be passed to start the child process with child_process.fork(). Execargv. push(‘–inspect=9229’) can be used to add execution parameters to open the debug port for the child process.
  2. Run cluster.fork() to clone the process on which port 9229 has been enabled. The new process automatically starts debugging and uses ports 9230, 9231, and 9232 in incrementations.

Debugging Tool Access

Chrome/chromium browser

Chrome (V55 +) browser provides three access debugging methods

1) Use console node –inspect=9229 yourscript.js to start the script and the console will output the URL to open the debug interface. Copy it to Chrome and open it.

2) Enter Chrome ://inspect/# Devices in the address bar

Check Discover Network Targets, then click Configure to set the address and port, add port 9229 to use.

After confirming Done, refresh chrome://inspect/# Devices screen and wait a while to see node –inspect=9229 yourscript.js launch script in Remote target. Click Inspect to enter the debug interface.

3) Install a Chrome extension NIM that automatically finds and loads the URL in method 1 once the debug port is configured.

VS Code

Vs Code has Node Debugger built in and supports both V8 Debugger Protocol and V8 Inspector Protocol. For the V8 Inspector Protocol, you only need to add an Attach type configuration to the configuration

{
    "name": "Attach to Process".
    "type": "node".
    "request": "attach".
    "port": 9229
}
Copy the code

A debugging tool

Console Panel

After chrome is connected to the Node process to be debugged, it can proxy all Console output from the Node process in the Console, providing flexible Filter filtering, and the ability to execute the code directly within the context of the Node process code.


Sources Panel

You can view all loaded scripts in Sources, including third-party libraries and Node core libraries. Select files to edit, Ctrl + C save to directly modify running scripts.


Profile Panel

Profiles are used to monitor the performance of running scripts, including CPU and memory usage, in four types of Profiling.

CPU profile

There is only the first type of CPU-related Profile, which records the CPU time spent executing Javascript functions on a timeline.

Selection of time period

There are two ways

1) Manual start/stop: Click Start to start recording and click Stop to stop recording



Profile (‘tag’) console.profileEnd(‘tag’). You can edit and save the code in the Sources panel and then refresh F5.

Both the start and end record profiles are printed in the Console, and a profile record is generated.

Profile record analysis

There are three views

  1. Chart: commonly known as the flame chart, shows the function call stack along the horizontal axis of time. Here are some simple examples

The function call stack of the flame chart is inverted, with the bottom of the stack at the top and the bottom of the stack at the top. A stack is a tick, and a tick must be invoked from the bottom layer of Node. In Node, system callbacks using process.Nexttick (fn) and setTimeout(fn, deloy) will generate a new tick. A new call stack is generated. The figure above shows two ticks, the first generated by the setInterval(FN, deloy) callback and the second generated by the process.nexttick (FN) callback.

Functions are called from the bottom of the stack to the top. The first stack listOnTimeout is called by the bottom layer. TryOnTimeout is called in listOnTimeout, and onTimeout is called in tryOnTimeout… And so on.

The width of the call stack is the execution time of the function. The execution time of a function includes the execution time of its internal calls to other functions, so a function near the bottom of the stack must take longer than a function near the top of the stack. The execution time of the current function, excluding the execution time of internal calls to other functions.

Clicking on the function takes you to the position defined by the function in the Sources panel.

Hover over a function to display its name and data:

The following explanation is taken from the Chrome-devtools documentation – Accelerating JavaScript execution

    • The Name. Name of the function.
    • The Self time. The time required to complete the current call to a function, including only the declaration of the function itself, not any function called by the function.
    • The Total time. The time required to complete the current call of this function and any functions it calls.
    • The URL. The location of a function definition of the form file.js:100, where file.js is the name of the file that defines the function and 100 is the line number defined.
    • Aggregated self time. Record the total time of all calls to a function, excluding the functions called by this function.
    • Aggregated total time. The total time of all calls to a function, not including the functions called by this function.
    • Not optimized. If the analyzer has detected potential optimizations in the function, they are listed here.
  1. Heavy (Bottom Up) : Statistics, from the Bottom Up, refers to the Bottom of the flame chart. Refer to the Chrome-devTools documentation – Speed up JavaScript execution
  2. Tree (Top Down) : Statistics, from Top to bottom. The Top refers to the Top of the flame chart. Refer to the Chrome-devTools documentation – Speed up JavaScript execution

Memory profile

To be added