[React服务端渲染系列] VSCode调试npm scripts

导语:咱们大多数状况下调试node都采用的是VSCode右侧自带的小蜘蛛debug.可是咱们每每有一些项目是经过npm的命令启动运行的.咱们应该怎么调试呢.

开发React服务端渲染功能的时候，咱们一般须要执行一条webpack编译构建服务端和客户端代码的npm命令, 譬如npm run dev这种。同时咱们须要启动一个Node服务，譬如这种:node server/run.js。可是这种方式不支持断点调试，因而咱们能够经过VSCode自带的小蜘蛛来启动项目，就能够进行愉快的调试了。

可是每次启动项目都须要执行两步操做，这对我而言是没法接受的。能不能直接在执行npm run dev的时候在运行webpack编译构建命令的同时启动Node服务、并在VSCode开启调试模式呢(PS: 这里不讲Chrome调试Node方式)，方法以下：

安装concurrently依赖

这样你就能够同时执行多条npm命令了。如

"scripts": {
    "client": "cross-env NODE_ENV=development webpack --mode development --config webpack/client/dev.js --watch",
    "server": "cross-env NODE_ENV=development webpack --mode development --config webpack/server/dev.js --watch",
    "tsw": "node server/run.js",
    "dev": "concurrently \"npm run client\" \"npm run server\" \"npm run tsw\""
},
复制代码

这个时候你运行npm run dev就能够在启动webpack的同时启动node服务了.

VSCode launch 和 attach模式

VSCode Debug Protocol提供了两种不一样的Debug方式:Launch和Attach.其中 Launch也就是咱们使用小蜘蛛的默认Debug方式，它主要负责启动应用程序并开启调试模式。而Attach则是去监听一个已经启动的程序并调试（这里不局限于本地，能够远程调试）。

这里咱们确定不能选Launch模式.咱们要作的就是使用node命令启动一个Node服务以后，并监听这个Node服务便可。咱们须要对咱们的node server/run.js进行改造下:

node --nolazy --inspect-brk=8881 server/run.js
复制代码

其中咱们须要经过参数inspect-brk指定一个调试的端口号,这里随便写个数字就行了。关于node inspect本身能够佛系研究一下，

VSCode Auto Attach.

咱们这个时候执行npm run dev命令以后，咱们发现仍是没有启动调试模式。不要着急，那是由于咱们没有attach这个服务。执行command+shift+p命令，搜索并点击Debug: Toggle Auto Attach便可自动监听已启动的服务。点击后你会发现此时已经自动监听咱们刚刚启动的服务并开启调试模式了，开始愉快的调试吧，只要VSCode不重启，不须要重复执行。

等等...好像仍是很麻烦额，每次重启都须要从新手动触发自动监听，不用怕，VSCode setting能够拯救你. 在VSCode全局配置中搜索Auto Attach.将Node: Auto Attach设置为自动开启就行了。后面不再用手动触发啦...

参考文章

VSCode官方文档：Node.js debugging in VS Code