vscode npm怎么執行

vscode npm怎么執行

vscode npm怎么執行?

vscode 調試node之npm與nodemon

調試nodeJS有很多方式,可以看這一篇How to Debug node.js with the Best Tools Available,其中我最喜歡使用的還是V8 Inspector和vscode的方式。

在vscode中,點擊那個蜘蛛的按鈕

就能看出現debug的側欄,接下來添加配置

選擇環境

就能看到launch.json的文件了。

啟動的時候,選擇相應的配置,然后點擊指向右側的綠色三角

launch模式與attach模式

{ ??"version":?"0.2.0", ??"configurations":?[ ????{ ??????"type":?"node", ??????"request":?"launch", ??????"name":?"Launch?Program", ??????"program":?"${workspaceRoot}/index.js" ????}, ????{ ??????"type":?"node", ??????"request":?"attach", ??????"name":?"Attach?to?Port", ??????"address":?"localhost", ??????"port":?5858 ????} ??] }

當request為launch時,就是launch模式了,這是程序是從vscode這里啟動的,如果是在調試那將一直處于調試的模式。而attach模式,是連接已經啟動的服務。比如你已經在外面將項目啟動,突然需要調試,不需要關掉已經啟動的項目再去vscode中重新啟動,只要以attach的模式啟動,vscode可以連接到已經啟動的服務。當調試結束了,斷開連接就好,明顯比launch更方便一點。

在debug中使用npm啟動

很多時候我們將很長的啟動命令及配置寫在了package.json的scripts中,比如

"scripts":?{ ??"start":?"NODE_ENV=production?PORT=8080?babel-node?./bin/www", ??"dev":?"nodemon?--inspect?--exec?babel-node?--presets?env?./bin/www" },

我們希望讓vscode使用npm的方式啟動并調試,這就需要如下的配置

{ ??"name":?"Launch?via?NPM", ??"type":?"node", ??"request":?"launch", ??"runtimeExecutable":?"npm", ??"runtimeArgs":?[ ????"run-script",?"dev"//這里的dev就對應package.json中的scripts中的dev ??], ????"port":?9229//這個端口是調試的端口,不是項目啟動的端口 },

在debug中使用nodemon啟動

僅僅使用npm啟動,雖然在dev命令中使用了nodemon,程序也可以正常的重啟,可重啟了之后,調試就斷開了。所以需要讓vscode去使用nodemon啟動項目。

{ ??"type":?"node", ??"request":?"launch", ??"name":?"nodemon", ??"runtimeExecutable":?"nodemon", ??"args":?["${workspaceRoot}/bin/www"], ??"restart":?true, ??"protocol":?"inspector",//相當于--inspect了 ??"sourceMaps":?true, ??"console":?"integratedTerminal", ??"internalConsoleOptions":?"neverOpen", ??"runtimeArgs":?[//對應nodemon?--inspect之后除了啟動文件之外的其他配置 ????"--exec", ????"babel-node", ????"--presets", ????"env" ??] },

注意這里的runtimeArgs,如果這些配置是寫在package.json中的話,就是這樣的

nodemon?--inspect?--exec?babel-node?--presets?env?./bin/www

這樣就很方便了,項目可以正常的重啟,每次重啟一樣會開啟調試功能。

可是,我們并不想時刻開啟調試功能怎么辦?

這就需要使用上面說的attach模式了。

使用如下的命令正常的啟動項目

nodemon?--inspect?--exec?babel-node?--presets?env?./bin/www

當我們想要調試的時候,在vscode的debug中運行如下的配置

{ ??"type":?"node", ??"request":?"attach", ??"name":?"Attach?to?node", ??"restart":?true, ??"port":?9229 }

完美!

? 版權聲明
THE END
喜歡就支持一下吧
點贊7 分享