本文部分内容、源码和截图借鉴自若川大佬提供的文章，本人懒得自己再弄了，若大佬本人看到不要见怪哈，有兴趣的可以去看看它原文，链接地址：lxchuan12.gitee.io/debug/#\_1-…
1. 推荐安装或者更新到最新版 VSCode
官网下载安装 VSCode。
如果你的
VSCode不是中文（不习惯英文），可以安装简体中文插件。
如果VSCode没有这个调试功能。建议更新到最新版的VSCode（目前最新版本v1.62.2）。
2. 配置 auto-attach
VSCode 调试 JS 的方法有很多，目前比较推荐的就是无需配置的 auto-attach。
默认无需配置，超级好用
按 ctrl + shift + p，打开输入 >auto attach。默认是智能（smart）。如果不是，可以查看设置成智能，或者根据场景自行设置成其他的。
更多可以查看官方文档：nodejs-debugging
3. 调试 Node.js 代码
我特意新建了一个仓库。供读者动手实践。
git clone https://github.com/lxchuan12/nodejs-debugging.git
cd nodejs-debugging
# npm i -g yarn
yarn install
一般来说，从 package.json 文件查看入口，其中 main 字段会说明入口文件是什么。同时查看 scripts 脚本文件。
一般提前在入口文件打好断点。
3.1 调试操作方式
操作方式一：package.json
在 package.json 找到相应的 scripts。鼠标悬浮在相应的命令上，会出现运行命令和调试命令两个选项，选择 调试命令 即可进入调试模式。或者点击 scripts 上方的 调试，再选择相应的命令。也可以进入调试模式。
操作方式二：终端命令
通过快捷键 ctrl + ` 反引号 打开终端。或者通过 查看 —— 终端 打开 VSCode 终端。
在终端进入到目录。执行相应的脚本。
VSCode 则会自动进入到调试模式。如下图所示：
接着我们看按钮介绍。
3.2 调试按钮介绍
详细解释下几个调试相关按钮。
-
- 继续（F5）: 点击后代码会直接执行到下一个断点所在位置，如果没有下一个断点，则认为本次代码执行完成。
-
- 单步跳过（F10）：点击后会跳到当前代码下一行继续执行，不会进入到函数内部。
-
- 单步调试（F11）：点击后进入到当前函数的内部调试，比如在
fn这一行中执行单步调试，会进入到fn函数内部进行调试。
- 单步调试（F11）：点击后进入到当前函数的内部调试，比如在
-
- 单步跳出（Shift + F11）：点击后跳出当前调试的函数，与单步调试对应。
-
- 重启（Ctrl + Shift + F5）：顾名思义。
-
- 断开链接（Shift + F5）：顾名思义。
调试走到不是想看的文件时（或者完全不是这个目录下的文件时），可以选择单步退出按钮或者重新调试。
4. 其他调试
由于很多项目都配置了代码压缩，难于调试。所以开发环境下，一般通过配置生成 sourcemap 来调试代码。大部分开源项目（比如vue、vue-next源码）也会在贡献指南中说明如何开启 sourcemap。
普通 webpack 配置
devtool: 'source-map',
调试 vue-cli 3+ 生成的项目。
// vue-cli 3+
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
chrome 调试代码其实也类似。在 chrome devtools 的 source 面板找到相应文件，去打断点再调试。
5. 其他参考链接
如何调试代码看以下这些参考链接，动手练习可以学会，Node.js 也类似。
6. 总结
文章比较详细的介绍了 VSCode 调试 Node.js 调试代码的基本技能，Chrome 调试代码其实也是类似。调试代码是前端程序员基本技能，必须掌握。
本文使用 文章同步助手 同步
