• Debugging Node.js in Chrome DevTools
  • The Nuggets translation Project
  • The square root of three
  • Proofreader: Shenxn, CoderBOBO

This article introduces a new way to develop, debug, and analyze Node.js applications in Chrome Developer Tools.

devtool

Recently I’ve been working on a command-line tool called DevTool that runs Node.js programs in Chrome’s developer tools.

The following record shows setting breakpoints in an HTTP server.

The tool blends Node.js and Chromium features together based on Electron. It is intended to provide a simple interface for debugging, analyzing, and developing Node.js applications.

You can install it using NPM:

npm install -g devtool
Copy the code

REPL

To some extent, we can use it as an alternative to node shell commands. For example, we can open a REPL like this. REPL is a simple, interactive programming environment.

devtool
Copy the code

This will launch an instance of Chrome developer tools with Node.js feature support.

We can reference Node modules, native NPM modules, and built-in modules like process.cwd(). You can also get functions from Chrome developer tools like Copy () and table().

Other examples are obvious:

# run a Node script
devtool app.js

# pipe in content to process.stdin
devtool < audio.mp3

# pipe in JavaScript to eval it
browserify index.js | devtool
Copy the code

The development of

We can use DevTool in the development of general-purpose modules and applications instead of existing tools like Nodemon.

devtool app.js --watch
Copy the code

This command will launch our app.js in the Chrome Developer Tools console, and with the –watch argument, our saved files will be (automatically) reloaded to the console.

Click the app.js:1 link and the application will take us to the relevant line in the Sources TAB.

In the Sources TAB, you can also hit Cmd/Ctrl + P for a quick search of all dependent modules. You can even review and debug built-in modules, such as those in Node.js. You can also browse modules using the left-hand panel.

debugging

Because we have access to the Sources TAB, we can use it to debug our application. You can set a breakpoint and reload the debugger (Cmd/Ctrl + R), or you can set an initial breakpoint with the –break flag.

devtool app.js --break
Copy the code

Here are some features that might not be particularly common for those learning Chrome developer tools:

  • Conditional breakpoints
  • Pause when there are uncaught exceptions
  • Restart the frame
  • Listening expression

Tip – When the debugger pauses, you can hit the Escape key to open a console that executes in the current scope. You can modify some variables and continue.

Analysis of the

Another feature of Devtool is analyzing programs like Browserify, gulp, and Babel.

Here we use console.profile(), a Chrome feature, to analyze the CPU usage of a packaging tool.

var browserify = require('browserify');

// Start DevTools profiling...
console.profile('build');

// Bundle some browser application
browserify('client.js').bundle(function (err, src) {
  if (err) throw err;

  // Finish DevTools profiling...
  console.profileEnd('build');
});
Copy the code

Now let’s run devTool on this file:

devtool app.js
Copy the code

After execution, we can see the results in the Profiles TAB.

You can use the links on the right to view and debug the code paths that are frequently executed.

Advanced options

The experiment

Chrome is constantly pushing new features and experiments into its developer tools, such as the Promise Inspector. You can activate them by clicking on the three dots in the top right corner and then going to Settings -> Experiments.

Once enabled, you can bring up a panel with Promises Monitor by hitting the Escape key.

Tip: On Experiments, if you hit the Shift key 6 times, you get some or more experimental (unstable) features.

--console

You can redirect console output to terminals (process.stdout and process.stderr). It also allows you to pipe it into other processes, such as TAP prettifiers.

devtool test.js --console | tap-spec
Copy the code

-- 和 process.argv

Your script can parse process.argv just like a normal Node.js application. If you pass a period (–) in the devtool command, everything after it is treated as a new process.argv. Such as:

devtool script.js --console -- input.txt
Copy the code

Now, your script looks like this:

var file = process.argv[2];
console.log('File: %s', file);
Copy the code

Output:

File: input.txt
Copy the code

--quit 和 --headless

With –quit, when an error (such as a syntax error or an uncaught exception) is encountered, the process quietly exits and returns the end code 1.

With –headless, development tools will not be opened.

This can be used with command line scripts:

devtool render.js --quit --headless > result.png
Copy the code

--browser-field

Some modules may provide an entry point for better running in the browser. When you need these modules, you can use –browser-field to support the package.json flag

For example, we could use xhr-request, which the module uses when referenced with the “browser” field.

const request = require('xhr-request');

request('https://api.github.com/users/mattdesl/repos', {
  json: true
}, (err, data) => {
  if (err) throw err;
  console.log(data);
});
Copy the code

Execute in shell:

npm install xhr-request --save
devtool app.js --browser-field
Copy the code

Now we can review the request in the Network TAB:

--no-node-timers

By default, we provide global setTimeout and setInterval, so they behave like Node.js (returning an object with the unref() and ref() functions).

However, you can disable this method to improve support for asynchronous stack tracing.

devtool app.js --no-node-timers
Copy the code

V8 Flags

In the current directory, you can create a.devToolrc file for advanced Settings such as V8 Flags.

{
  "v8": {
    "flags": [
      "--harmony-destructuring"
    ]
  }
}
Copy the code

Visit here for more details

trap

Since the program is running in a Browser/Electron environment, not a real Node.js environment. So there are some pitfalls you need to be aware of.

contrast

Several Node.js debuggers already exist, so you might be wondering what the differences are.

WebStorm debugger

The WebStorm editor includes a very powerful Node.js debugger. If you already use WebStorm as your code editor, that’s great for you.

However, it lacks some features found in Chrome developer tools, such as:

  • A rich interactive console
  • Exception pause
  • Asynchronous stack trace
  • Promise to check
  • Analysis of the

But because you are integrated with your WebStorm workspace, you can modify and edit your files while debugging. It also runs in a real Node/V8 environment, unlike Devtool. Therefore, it is more robust for most Node.js applications.

iron-node

A debugger also based on Electron is iron-Node. Iron-node includes a built-in command to recompile native plug-ins, as well as a sophisticated graphical interface to display your package.json and readme.md.

Devtool, on the other hand, focuses more on the command line, UniX-style pipes, and the REdirection and Electron/Browser apis as interesting use cases.

Devtool provides a variety of features to behave more like Node.js (such as require.main, setTimeout, and process.exit) and overrides the internal require mechanism for source maps, There are also improved error handling, breakpoint injection, and a solution for the “Browser” field.

node-inspector

You might also like Node-Inspector, a tool that uses remote debugging rather than being built on top of Electron.

This means that your code will run in a real Node environment, without any Window or other Browser/Electron API to contaminate the scope and cause problems in some modules. It has strong support for large Node.js applications (that is, native plug-ins) and more control over developer tool instances (that is, the ability to inject breakpoints and support network requests).

However, because it reimplements a lot of debugging tricks, it can feel slower, clunky, and more vulnerable to development than the latest version of Chrome developer tools. It crashes frequently, often leading to frustration for Node.js developers.

While DevTool is intended to be a touch friendly for those who transfer from Chrome developer tools, it also adds features like the Browser/Electron APIs.