總結vscode調試vue,nodejs的各種方法

目錄

• 前端的調試
  • chrome+launch
  • chrome+attach
  • chrome自帶
• 后端調試
  • node+attach
  • node直接啟動
  • 使用nodejs自帶的devtool
  • npm腳本調試
  • 針對typescript
• 總結

之前寫項目一直都是 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

2. 創建launch.json，如果根目錄下有tsconfig.json，vscode會生成如圖的代碼

3. 然后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 也可以。