node 调试工具入门教程
在 vscode 或 chrome devtools 里调试 js 文件
假设我想在 vscode 里调试 index.js 文件。
首先在对应的地方打上断点：
然后执行命令：
node --inspect index.js就会进入到 vscode 的调试模式。
--inspect 是检查、调试的意思。
需要注意，在 vscode 里搜索设置 inspect，不要设置为 disabled，否则不会进入调试模式。
除了使用 --inspect 参数，还可以使用 --inspect-brk 参数。后者会在前者能力的基础上，自动在代码入口处打上断点。
但经过我实际的试验，发现使用 --inspect-brk 参数，一开始不能在 vscode 里进入调试模式，只能先在 chrome devtools 里调试后，才能在 vscode 里调试。而 --inspect 可以在 vscode 和 devtools 里调试。
服务的默认端口和地址还可以通过 node --inspect=[host:port] 指定。
如何在 chrome devtools 里调试我们的代码呢？
第一步，也是先执行下面的命令：
node --inspect index.js
# 或者
node --inspect-brk index.js然后打开谷歌浏览器，在地址栏中输入 about://inspect，点击 Open dedicated DevTools for Node 按钮，等待一会就能在 chrome devtools 里调试我们的代码了。
缺点
以这种方式调试有个缺点，每次调试完后，如果想要再调试一遍，又得在控制台输入一遍命令，然后回车执行。如果我们用这种方式调试了很多遍，会感觉到非常繁琐，做了很多重复劳动，效率也不是很高。
通过配置文件调试 node 应用
{
// 调试配置的名称
"name": "调试 node 应用",
// node 或 chrome
// node 表示 node 应用
// chrome 表示浏览器应用
"type": "node",
// 表示启动。
"request": "launch",
// 跳过不会调试的文件
"skipFiles": [
"<node_internals>/**"
],
// 入口文件
"program": "${workspaceFolder}/docs/useful/debug/debug-demo/test.js",
// 用于 ts 等编译后的文件的 sourcemap 映射。默认原文件与编译后的文件的位置一样。
"outFiles": [
"${workspaceFolder}/**/*.js",
"!**/node_modules/**"
]
},调试服务器时打开一个 URI
开发 Web 程序通常需要在 Web 浏览器中打开特定 URL，以便在调试器中访问服务器代码。VS Code 有一个内置功能“serverReadyAction”来自动化这个任务。
{
"name": "调试服务器时打开一个 URI",
"type": "node",
"request": "launch",
"skipFiles": [
"<node_internals>/**"
],
// 入口文件
"program": "${workspaceFolder}/docs/useful/debug/debug-demo/app.js",
"outFiles": [
"${workspaceFolder}/**/*.js",
"!**/node_modules/**"
],
"serverReadyAction": {
// 匹配端口号，作为一个正则的捕获组使用
"pattern": "listening on port ([0-9]+)",
// 替换端口号，%s 使用 pattern 中的第一个捕获组替换
"uriFormat": "http://localhost:%s",
// 打开外部浏览器
"action": "openExternally"
}
},调试 ts 项目
首先创建一个目录，在下面执行 tsc --init，创建一个 ts 配置文件。然后创建 index.ts 文件，并在 vscode 中打上断点。
ts 配置文件中需要设置这两项，
// 开启 ts 与 js 文件的 sourceMap
"sourceMap": true,
// ts 文件转为 js 文件的输出目录
"outDir": "./out",index.ts
const num: number = 123;
console.log(num);
function fn(arg: string): void {
console.log('fn', arg);
}
fn("Hello");然后配置调试文件，开启调试，可以发现命中断点。
{
"name": "调试 ts 项目",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/docs/useful/debug/debug-ts/index.ts"
},调试 html 项目
新建一个 html 文件，并在 script 之间打上断点。
<html lang="en">
<body>
<script>
console.log(123)
console.log(123)
console.log(123)
console.log(123)
</script>
</body>
</html>然后设置调试配置，注意启动文件的字段名叫 file。
{
"name": "调试 html 项目",
"type": "chrome",
"request": "launch",
"file": "${workspaceFolder}/docs/useful/debug/debug-demo/index.html"
},调试 vue-cli 创建的项目
参考 https://github.com/microsoft/vscode-recipes/tree/main/vuejs-cli
调试文件配置的 userDataDir 字段
这个字段用来设置调试器启动的 chrome 的用户数据储存目录；
"userDataDir": false, // chrome 保存的用户数据目录调试器打开的 chrome 是没有任何书签，插件和 cookie 等本地储存的，这是因为 userDataDir 的默认值是 true，即每次启动都使用临时目录；这样每次调试插件和 cookie 都会被清空，很不方便；
将 userDataDir 设置为 false 的话可以使用默认的用户数据目录；重启调试器，可以看到各种插件都是在的；
但是这样有个问题，同一个数据目录同一时间只能被一个 chrome 实例使用，也就是说，当我们用 chrome 打开网页之后，调试器就不能用这个 chrome 调试了。
可以设置一个目录专门用来储存调试时的用户数据，比如
"userDataDir": "${workspaceFolder}/data"