详解配置Visual Studio/Webstorm来调试JavaScript

译者按： 本文介绍了使用 Node Inspector 来调试 JavaScript 和 TypeScript 应用。

本文采用意译，版权归原作者所有

我准备了一个计算斐波拉契序列的例子，放在Github 仓库。我建议你将它克隆下来并且跟着我操作。当然，这不是必须的。

$ git clone https://github.com/andrerpena/medium-node-inspector-tests.git
$ cd medium-node-inspector-tests
$ npm i

我把本文需要使用到的命令都写成了脚本。如果你没有克隆代码，那么参考下面的脚本：

"scripts": {
  "build:ts": "tsc",
  "start": "node index.js",
  "start:watch": "nodemon index.js",
  "start:debug": "node --inspect index.js",
  "start:debug:brk": "node --inspect-brk index.js",
  "start:debug:ts": "node --inspect --require ts-node/register index.ts",
  "start:debug:ts:brk": "node --inspect-brk --require ts-node/register index.ts"
}

当你的环境配置好了，你可以使用npm start来启动程序，并访问localhost:3000/[n]来查看斐波拉契序列。

因为我想演示 JavScript 和 TypeScript debugging，所有我写了index.ts文件和对应的 JavaScript 版本由 tsc 命令生成。所以，JavaScript 版本看上去会有一点丑。

Debug 模式运行

我们将会用两种模式来 debugging。分别使用--inspect和--inspect-brk。它们的区别在于，第二种在像 Chrome DevTools 这样的 agent 接入前，不会真的启动。并且，启动后，会自动在用户的第一行代码处暂停。

当一个 Node.js 应用在 inspect 模式下运行，有两点要注意：

一个 UUID 会分配到这个 debugging 会话。并且同时一个 WebSockets 终端(ws://127.0.0.1:9229/[UUID])会一直连接。该终端会将代码的状态实时发送。
一个 HTTP 终端(http://127.0.0.1:9229/json)会提供，便于像 Chrome DevTools 这样的终端知晓 Node 会话和相应的 UUID。

你可以curl http://127.0.0.1:9229/json。更多信息请查看: legacy-debugger。

使用 Chrome DevTools Debugging JavaScript

运行：

npm start:debug // if you're on the suggested repo or...
node --inspect index.js // ...otherwise.

你会看到：

你可以看到一个 WebSocket 服务器在启动，并且监听 9229 端口。并且可以看到 UUID 是5dc97...。每一个会话都有各自的 UUID。如果你重启服务，UUID 会改变。

下一步是打开 Chrome，并在网址框输入 Chrome://inspect。

在这里，我想说的是：Chrome 通过访问http://127.0.0.1:9229/json可以自动发现正在运行的会话。现在点击上图最下方的inspect来开始 debugging。一个新的 DevTools 窗口会打开。你可以访问想要 debug 的文件，去加入断点来 deug。

如果，你运行：

npm start:debug:brk // if you're on the suggested repo or...
node --inspect-brk index.js // ...otherwise.

可以看到：

当你在谷歌浏览器输入 Chrome://Inspect，你会发现两个版本的 TypeScript 文件：一个有对应的 source map(标记为[sm])，另一个没有。当然，如果要调试，把断点放在带 sm 标记的文件里面。

开发中有这么多工具可以使用，那么上线以后呢？还能愉快 debug 吗？你可以的，欢迎使用Fundebug！

使用 Visual Studio 来 Debugging JavaScript

选择要 Debug 的目标 JavaScript 文件，点击 Debug 选项(Mac: Shift+Cmd+D)，然后点击执行按钮(▶️)即可。Visual Studio 会自动加入 inspect 参数启动 Node。

如果想在控制台运行，你也可以创建一个 launch configuration 文件。Visual Studio 的自动补全非常惊艳。记住 9929 是默认的 Node Inspector 的端口号。

{
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach",
            "port": 9229
        }
    ]
}

如果你够仔细，会发现上面的配置文件并没有制定 UUID。其实、Visual Studio 会自动去访问ws://127.0.0.1:9229来获取当前会话的状态。当你配置好后，可以在控制台运行：

npm start:debug // if you're on the suggested repo or...
node --inspect index.js // ...otherwise.

然后配置 launch configuraiton，并Attatch，最好点击播放按钮。如下所示：

使用 Visual Studio 来 Debugging TypeScript

在 Visual Studio 中，如果配置了”type”:”node”，则不允许使用.ts 后缀的文件，那么你还有两个方法：要么用 ts-node 将.ts 编译。

{
    "configurations": [
        {
            "name": "Current TS File",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/.bin/ts-node",
            "args": ["${relativeFile}"],
            "protocol": "inspector"
        }
    ]
}

或则将 runtimeExecutable 指定为 NPM，而不是默认的 node。

{
    "configurations": [
       {
           "type": "node",
           "request": "launch",
           "name": "Launch via NPM",
           "runtimeExecutable": "npm",
           "runtimeArgs": [
               "run-script",
               "start:debug:ts"
           ],
           "port": 9229
       },
    ]
}

如果你想在控制台运行 TypeScript，如下：

npm start:debug:ts // if you're on the suggested repo or...
node --require ts-node/register index.ts // ...otherwise.

launch configuraiton 如下：

{
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach",
            "port": 9229
        }
    ]
}

使用 WebStorm 来 Debugging JavaScript

在右上角，可以选择Run/Debug Configurations，点击并选择+号，然后会列出很多候选配置。然后选择 Node.js，并命名。在 JavaScript file 选项，填入你的入口文件。然后就可以运行啦。

使用 WebStorm 来 Debugging TypeScript

和处理 JavaScript 的配置几乎一样，不过在 Node Parameters 选项，你需要填写--inspect --require ts-node/register。

希望本文可以助你愉快(fun)debug！

关于Fundebug

Fundebug专注于JavaScript、微信小程序、支付宝小程序线上应用实时BUG监控。自从2016年双十一正式上线，Fundebug累计处理了80亿+错误事件。欢迎大家免费试用！

版权声明

转载时请注明作者 Fundebug以及本文地址：
https://blog.fundebug.com/2018/04/27/debugging-js-with-chrome-dev-tools/

您的用户遇到BUG了吗？

体验Demo 免费使用