vscode 調試 幫助你快遞開發

前端不僅是隻能在瀏覽器調試，如今愈來愈多單頁面，在編輯器裏面進行調試將大大提升你的開發效率~~

一、調試vue 開發環境須要打開 source-map 方便調試 workspaceRoot 爲根路徑

在 launch.json 中配置

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8087",  // 8087 爲你啓動vue項目的端口
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///./src/*": "${webRoot}/*"
      }
    },
  ]
}

而後按 F5 就會啓動一個google 的頁面在編輯器裏就能夠打斷點了

二、調試 node 環境下某個 js 文件

{
  "version": "0.2.0",
  "configurations": [
    // 此爲數組能夠寫多個
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceRoot}/build/creat.js"  
    },
  ]
}

三、調試 node 後臺項目 注意：本身寫node時候通常是 node ./bin/www 啓動一個服務，調試時候不須要啓動直接 按 F5 啓動調試便可(會自動啓動服務) 不然會致使端口衝突調試失敗

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceRoot}\\bin\\www"
    }
  ]
}