总结vscode调试vue,nodejs的各种方法

前端的调试
后端调试
总结

之前写项目一直都是 console.log()来调试的，浪费了很多时间，现在整理一下用 vscode 对 nuxt(vue)前后端进行调试的方法

前端的调试

chrome+launch

使用 chrome 调试，模式为 launch。不多说，直接上图

当执行到到的位置就会出现

chrome+attach

使用chrome调试，模式为attach,跟launch的区别是不会打开新的浏览器窗口

更新：之前由于疏忽没发现这里有问题，应该先关闭之前的浏览器，然后带上--remote-debugging-port=9222启动chrome，再接着下面，如果没有成功，再去终端看看chrome的参数是否真的带上了，各系统启动命令如下

//windows
右键点击 Chrome 的快捷方式图标，选择属性
在目标一栏，最后加上--remote-debugging-port=9222 注意要用空格隔开

//linux
打开控制台执行：
google-chrome --remote-debugging-port=9222

//macos
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

macos和linux可以使用htop查看，带上参数后如下图

然后启动调试，之后马上切换到chrome，让vscode的调试程序可以“粘上”到你的项目

chrome自带

使用chrome自带的调试，在代码中加入debugger关键字即可,也可以直接在chrome，sources控制台处加断点，即下图最右边那个位置，不过由于代码打包过了，很难在chrome打对断点的位置，所以建议在vscode打断点

后端调试

node+attach

与上面前端的attach方法几乎一样，区别是chorme换成了node，只贴几个重要的图

debugger和编辑器打的小红点都是可以触发的

优点是基本不怎么用配置，缺点是每次启动都要attach一下

node直接启动

后面几种都是直接launch的方法，第一种为node直接启动的方法，如图

然后修改launch.json文件吧下面位置的路径改成你的项目启动入口

然后需要在后面加上,"console": "integratedTerminal",如果不加的话启动调试的时候看不见打包进度。而且，需要自动重启的话要再加上"runtimeExecutable": "nodemon",当然，前提是装了nodemon

这种方法需要知道入口文件的位置，也可以直接node启动编译后的ts文件，在tsconfig.json中把sourcemap设置为true就行了

使用nodejs自带的devtool

在node启动命令后面加上--inspect参数，启动后查看chrome的控制台会发现有个
node的图标

点进去之后可以在file选项下找到自己的项目目录，然后在右边可以加断点

官方说明https://nodejs.org/en/docs/guides/debugging-getting-started/
这种方法配置非常简单，和vscode没多大关系，不用管vscode,如果知道ts编译后的入口文件(不知道的去看下tsconfig.json)，修改tsconfig.json后可以直接node启动，在chrome中调试。

npm脚本调试

添加配置的时候选择通过 npm 启动，如图

修改配置，其中端口号随意，并非项目的端口号

再修改 pakage.json,添加--inspect，注意这个参数需要放在入口文件之前，否则会提示连不上端口的错误。

针对typescript

除了下面两种方法，使用前面的attach方法也是可以的，配置非常简单，推荐使用。

1. Tsconfig.json中添加或设置"sourceMap": true

创建launch.json，如果根目录下有tsconfig.json，vscode会生成如图的代码

然后command+shift+p查找task，或者在首选项设置里面找，点击配置task

拉到最下面，找到构建的那几项，如果有tsconfig.build.json一般就选这个，没有就选tsconfig.json

修改task.json文件

修改launch.json文件

执行结果

针对typescript第二种方法

这里主要参考https://segmentfault.com/a/1190000011935122。

直接使用ts-node,和直接使用node调试js项目类似。
1. 安装ts-node,npm i ts-node
2. 创建launch.json，选择node，上面有这里不再赘述。
3. 修改launch.json如图
  其中args表示ts-node后面的参数，这里只填了当前文件
  program选择ts-node的启动文件
4. 切换到项目入口文件，直接启动调试。这种方法优点是不需要自行编译ts文件，缺点是要多装一个包，不能热启动

其他

https://www.jianshu.com/p/9cfc9a6ca283](https://www.jianshu.com/p/9cfc9a6ca283)

这个是使用 npm 脚本的方式进行调试，大致思路就是上面的npm 调试方法加上node 直接启动二者的结合。，提供了调试 ts 项目的思路，看起来比较麻烦，不是很想试了，大家有兴趣可以试试。

总结

上面的方法基本覆盖了 js 项目大部分的比较常用的调试方法，而且本人全部测试过(除了最后一种)。有前端有后端，有需要 vscode 和不需要 vscode 的，前端的调试有 chrome 这个神器，非常简单，后端使用 vscode 的 attach 的方法基本可以应付所有的框架项目，如果不用 vscode 那么直接使用 nodejs 自带的 devtool+chrome 也可以。

秒客网