【译】在 Chrome 开发者工具中调试 node.js

• 原文连接 : Debugging Node.js in Chrome DevTools

• 原文做者 : MATT DESLAURIERS

• 译文出自 : 掘金翻译计划

• 译文连接 : https://github.com/sqrthree/sqrthree.github.io/issues/8

• 译者 : sqrthree (根号三)

• 校对者: shenxn、CoderBOBO

这篇文章介绍了一种在 Chrome 开发者工具里面开发、调试和分析 Node.js 应用程序的新方法。

devtool

最近我一直在开发一个命令行工具 devtool，它能够在 Chrome 的开发者工具中运行 Node.js 程序。

下面的记录显示了在一个 HTTP 服务器中设置断点的状况。

该工具基于 Electron 将 Node.js 和 Chromium 的功能融合在了一块儿。它的目的在于为调试、分析和开发 Node.js 应用程序提供一个简单的界面。

你可使用 npm 来安装它:

npm install -g devtool

REPL

在某种程度上，咱们能够用它来做为 node shell 命令的替代品。例如，咱们能够这样打开一个 REPL (译者注: REPL 全称为"Read-Eval-Print Loop"，是一个简单的、交互式的编程环境)。

devtool

这将启动一个带有 Node.js 特性支持的 Chrome 开发者工具实例。

咱们能够引用 Node 模块、本地 npm 模块和像 process.cwd() 这样的内置模块。也能够获取像 copy() 和 table() 这样的 Chrome 开发者工具中的函数。

其余的例子就一目了然了:

# 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

开发

咱们能够在通用模块和应用程序的开发中使用 devtool，来代替像 nodemon 这样目前已经存在的工具。

devtool app.js --watch

这行命令将会在 Chrome 开发者工具中的控制台中启动咱们的 app.js， 经过 --watch 参数，咱们保存的文件将(自动)从新载入到控制台。

点击 app.js:1 连接，程序将会在 Sources 标签中把咱们带到与之相关的那一行。

在 Sources 标签中，你也能够敲击 Cmd/Ctrl + P 按键在全部依赖的模块中进行快速搜索。你甚至能够审查和调试内置模块，好比 Node.js 中的那些。你也可使用左手边的面板来浏览模块。

调试

由于咱们可以访问 Sources 标签，因此咱们能够用它来调试咱们的应用程序。你能够设置一个断点，而后从新加载调试器(Cmd/Ctrl + R)，或者你也能够经过 --break 标记来设置一个初始断点。

devtool app.js --break

下面是一些对于那些学习 Chrome 开发者工具的人来讲可能不是特别经常使用的功能:

• 条件断点

• 有未捕获的异常时暂停

• 重启帧

• 监听表达式

提示 - 当调试器暂停时，你能够敲击 Escape 按键打开一个执行在当前做用域内的控制台。你能够修改一些变量而后继续执行。

分析

devtool 的另外一个功能是分析像 browserify, gulp 和 babel 这样的程序。

这里咱们使用 console.profile() (Chrome 的一个功能)来分析一个打包工具的 CPU 使用状况。

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');
});

如今咱们在这个文件上运行 devtool :

devtool app.js

执行以后，咱们能够在 Profiles 标签中看到结果。

咱们可使用右边的连接来查看和调试执行频率较高的代码路径。

高级选项

实验

Chrome 会不断的向他们的开发者工具中推送新功能和实验，例如 Promise Inspector。你能够经过点击右上角的三个点，而后选择 Settings -> Experiments 来开启他们。

一旦启用，你就能够经过敲击 Escape 按键来调出一个带有 Promises 监视器的面板。

提示: 在 Experiments 界面，若是你敲击 Shift 键 6 次，你会接触到一些甚至更多的实验性（不稳定）的功能。

--console

你能够重定向控制台输出到终端中(process.stdout 和 process.stderr)。也容许你经过使用管道将它导入到其余进程中，例如 TAP prettifiers。

devtool test.js --console | tap-spec

-- 和 process.argv

你的脚本能够像一个普通的 Node.js 应用那样解析 process.argv。若是你在 devtool 命令中传递一个句号(--)，它后面的全部内容都会被当作一个新的 process.argv 。例如:

devtool script.js --console -- input.txt

如今，你的脚本看起来像这样:

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

输出:

File: input.txt

--quit 和 --headless

使用 --quit，当遇到了一个错误(如语法错误或者未捕获的异常)时，进程将会安静的退出，并返回结束码1 。

使用 --headless，开发工具将不会被打开。

这能够用于命令行脚本：

devtool render.js --quit --headless > result.png

--browser-field

一些模块为了更好的在浏览器中运行或许会提供一个入口点。当你须要这些模块时，你可使用 --browser-field 来支持 package.json flag

例如，咱们可使用 xhr-request ，当带有 "browser" 字段被引用时，这个模块会使用 XHR。

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

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

在 shell 中执行:

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

如今，咱们能够在 Network 选项卡中审查请求:

--no-node-timers

默认状况下，咱们提供全局的 setTimeout and setInterval，所以他们表现的像 Node.js 同样(返回一个带有 unref() and ref() 函数的对象)。

可是，你能够禁用这个方法来改善对异步堆栈跟踪的支持。

devtool app.js --no-node-timers

V8 Flags

在当前目录，你能够建立一个 .devtoolrc 文件来进行诸如 V8 flags 这样的高级设置。

{
  "v8": {
    "flags": [
      "--harmony-destructuring"
    ]
  }
}

访问这里获取更多细节

陷阱

因为程序是在一个 Browser/Electron 环境中运行，而不是在一个真正的 Node.js 环境中。所以这里有一些陷阱你须要注意。

对比

目前已经存在了一些 Node.js 调试器，因此你或许想知道他们之间的区别在哪。

WebStorm 调试器

WebStorm 编辑器里面包含了一个很是强大的 Node.js 调试器。若是你已经使用 WebStorm 做为你的代码编辑器，那对你来讲很棒。

可是，它缺乏一些 Chrome 开发者工具中的功能，例如:

• 一个丰富的互动的控制台

• 异常时暂停

• 异步堆栈跟踪

• Promise 检查

• 分析

但由于你和你的 WebStorm 工做空间集成，因此你能够在调试时修改和编辑你的文件。它也是运行在一个真正的 Node/V8 环境中，而不像 devtool 同样。所以对于大部分的 Node.js 应用程序来讲它更稳健。

iron-node

一个一样基于 Electron 的调试器是iron-node。iron-node 包含了一个内置的命令来从新编译原生插件，还有一个复杂的图形界面显示您的package.json 和 README.md。

而 devtool 更侧重于把命令行、Unix 风格的管道和重定向和 Electron/Browser 的 API 看成有趣的用例。

devtool 提供各类各样的功能来表现的更像 Node.js (例如 require.main, setTimeout 和 process.exit)，而且覆盖了内部的 require 机制做为 source maps，还有改进过的错误处理、断点注入、以及 "browser" 字段的解决方案。

node-inspector

你或许也喜欢 node-inspector，一个使用远程调试而不是构建在 Electron 之上的工具。

这意味着你的代码将运行在一个真正的 Node 环境中，没有任何 window 或其余的 Browser/Electron API 来污染做用域并致使某些模块出现问题。对于大型 Node.js 应用(即本地插件)来讲它有一个强有力的支持，而且在开发者工具实例中拥有更多的控制权(便可以注入断点和支持网络请求)。

然而，因为它从新实现了大量的调试技巧，所以对于开发来讲感受可能比最新版的 Chrome 开发者工具要慢、笨拙和脆弱。它常常会崩溃，每每致使 Node.js 开发人员很无奈。

而 devtool 的目的是让那些从 Chrome 开发者工具中转过来的人以为比较亲切，并且也增长了像 Browser/Electron APIs 这样的功能。