详解配置VS Code/Webstorm来调试JavaScript

详解配置VS Code/Webstorm来调试JavaScript译者按: 本文介绍了使用Node Inspector来调试 JavaScript和TypeScript应用。 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。 我准备了一个计算斐波拉契序列的例子,放在Github仓库。我建议你将它克隆下来并且跟…

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

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

详解配置VS Code/Webstorm来调试JavaScript

我准备了一个计算斐波拉契序列的例子,放在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]来查看斐波拉契序列。

详解配置VS Code/Webstorm来调试JavaScript

因为我想演示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

详解配置VS Code/Webstorm来调试JavaScript

使用Chrome DevTools Debugging JavaScript

运行:

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

你会看到:

详解配置VS Code/Webstorm来调试JavaScript

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

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

详解配置VS Code/Webstorm来调试JavaScript

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

详解配置VS Code/Webstorm来调试JavaScript

如果,你运行:

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

可以看到:

详解配置VS Code/Webstorm来调试JavaScript

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

详解配置VS Code/Webstorm来调试JavaScript

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

使用Visual Studio来Debugging JavaScript

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

以下视频请点击改链接查看原文。

详解配置VS Code/Webstorm来调试JavaScript

如果想在控制台运行,你也可以创建一个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,最好点击播放按钮。如下所示:

详解配置VS Code/Webstorm来调试JavaScript

使用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选项,填入你的入口文件。然后就可以运行啦。

详解配置VS Code/Webstorm来调试JavaScript

使用WebStorm来Debugging TypeScript

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

详解配置VS Code/Webstorm来调试JavaScript

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

今天的文章详解配置VS Code/Webstorm来调试JavaScript分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/22766.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注