利用vscode調試nodejs代碼實踐總結

2018.5.12更新

最近在用vscode 1.23版本的時候發現outDir不可使用了，建議這麼改吧，直接program採用編譯後的文件，而後打開sourceMaps，同時在babel編譯的時候本身搞--watch及時生成.map文件便於vscode索引;若是你要編譯其餘語言，其實能夠在package.json當中添加scripts，經過tasks.json來在debug以前進行編譯，下面展現出.vscode下的兩個文件，此爲babel方法，其餘相似

.launch.json

"configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "啓動程序",
      "program": "${workspaceFolder}/lib/login.js",
      "sourceMaps": true,
      "preLaunchTask": "build" // 等於下面`label`值
    }
  ]

tasks.json

{
  "version": "2.0.0",
  "command": "npm",
  "tasks": [
    {
      "label": "build",
      // 合起來就是`npm run build`
      "type": "npm",
      "script": "build"
    }
  ]
}

package.json

"scripts": {
    "build": "babel src --out-dir lib --source-maps"
  },

實際上這樣較慢，建議單獨在build加watch，而後直接不用preLaunchTask

前言

以前一直習慣了用瀏覽器來調試代碼，偶爾想調試一下node包中的代碼，或者本身想寫一個小的node插件無從下手，不知道該怎麼調試，通過查找資料和嚮導師請教實踐了一下這個過程

1. vscode概述

Visual Studio Code(如下簡稱vscode)是一個很強大的編輯器，相對而言比較輕量，由於我一般喜歡webstorm，webstorm自動保存和錯誤提示的特性深受我喜好，可是對於調試nodejs來講，vscode則更具備它的優點所在。vscode支持windows，OS X和Linux三種環境，而且能夠安裝擴展插件，於是能夠知足絕大多數人的要求，安裝配置非本文所要講述的內容，請自行查找，本文着重討論如何用vscode更好的調試node代碼，但願能對你們有所幫助。

2. vscode界面

左上角依次是項目目錄，搜索，版本管理git相關(左下角爲當前分支)，調試，其餘擴展插件 ，其餘的均爲中文標註，不解釋，都是我們必要的，這幾個若是沒有的建議調出來這都是調試很必要的幾個東西，能夠去到菜單欄的查看中逐一調出

3. 調試前置條件：launch.json配置

點擊圖中左數第四個按鈕，也就是調試，而後點擊圖中紅框便可打開launch.json

"configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/src/extract-cli.js",
            "args": ["--output", "output.pot", "${workspaceFolder}/test/product_group.vm"],
            "outDir": "${workspaceFolder}/dist",
            "sourceMaps": true
        }
    ]

type和request不用改，默認就能夠，request爲launch時用F5直接能夠啓動調試，request爲attach按照官網解釋是關聯到已經運行的一個程序，可是此處能夠無論，咱們就用vscode自帶的調試器進行調試就好。

program這個參數是指定要運行的js入口文件，其中${workspaceFolder}爲當前打開的項目目錄，.vscode目錄會自動生成在此目錄下，launch.json也在此目錄下

args也是個比較重要的，好比該例，我執行命令gettext-extract --output output.pot input.vm 那麼args的做用其實就是傳入命令後面的參數，每一個空格之間要分開，寫成args的某個子元素

sourceMaps對於編寫es5代碼來講這個參數沒有什麼卵用，可是對於寫es6,TypeScript等就十分有必要了，這個參數的值爲true時會利用編譯過程生成的map來進行源碼和編譯後的代碼進行對應，這樣在源碼打斷點，就能夠愉快的進行咱們的調試了

outDir是用來標註編譯後代碼的生成目錄的，幫助vscode進行查找

下面討論下關於編譯先後的對應關係這件事

• 我這邊是用的babel來進行編譯的，通過嘗試，program參數若是直接指向編譯後的文件，vscode奇蹟般的能夠本身去尋找到源碼文件，這對於咱們的調試是最簡單的方式了
• 若是program指向你編寫的文件，那麼須要提供一個outDir參數,只要配置到編譯生成目錄就行了。
• 其餘：目測不須要sourceMaps還有編譯成成.js.map若是你調試遇到了問題請嘗試將sourceMaps設置爲true並讓編譯工具生成map文件

4. 調試代碼

只要在你調試的代碼左邊點擊一下，只要是紅色的，說明此處斷點可行，如圖所示

直接按F5便可開始調試，會在界面上出現相似於chrome的那幾個單步跳過，單步調試等等，使用方法相似chrome,只是快捷鍵稍有不一樣

而後點擊左側上面介紹的調試按鈕，會看到運行到某一步的變量，還有調用堆棧狀況，如圖所示

5. 其餘

捎帶介紹一下本文使用的babel和命令行入口相關的知識

• 打開package.json，會發現有一個bin的配置,這麼配置再npm install的時候就會將這兩個命令加入到node_modules/.bin當中，而後就能夠用作命令行了

"bin": {
    "gettext-compile": "./dist/compile-cli.js",
    "gettext-extract": "./dist/extract-cli.js"
  }

• babel執行命令時能夠加--source-maps true來生成map文件，若是遇到我上面說到問題的纔會用到這個，估計其餘的編譯工具也會有；另外，咱們修改源文件以後，想當即重啓調試來進行驗證，每次都本身執行命令很麻煩，那麼babel自身支持--watch參數，能夠監控文件變化，這樣咱們就能夠實現簡單的自動化
• babel或者其餘的命令行命令寫的很長，不容易記住，那麼咱們就能夠將其寫在package.json當中,以下就是講babel編譯寫在其中，能夠執行npm run prepublish便可

"scripts": {
    "prepublish": "babel  --watch --presets es2015 --plugins transform-object-assign --source-maps true src --out-dir dist/"
  }

參考資料：

1. 官網提示文檔
2. [譯]Visual Studio Code文檔其4—調試
3. 採用easygettext源碼來進行講解的
4. babel --help的幫助