[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