详解配置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 免费使用