[譯]Visual Studio Code文檔其4—調試

Visual Studio Code之調試

全文翻譯自官方Docs，更新至1.3版本。

VS Code一個重要特性是它有很好的調試支持，內置的調試器能夠加速你的"編寫-編譯-調試"工做流。

調試器擴展

VS Code內置調試器支持調試Node.js運行時，同時也能夠調試JavaScript、TypeScript以及其餘JS轉譯語言。

如需調試其餘語言與運行時(包括PHP, Ruby, Go, C#, Python等)，請前往VS Code市場尋找相應的Debuggers(調試器)擴展程序。

開始調試

下文將基於內置的Node.js調試來進行相關的說明，大部分的說明一樣適用於其餘調試器。

一則建議：開始閱讀本文以前你能夠嘗試去建立一個簡單的Node.js應用程序，而後一遍閱讀本文一遍動手實驗(這裏有一篇文章能夠教你如何安裝Node.js並建立一個的"Hello World"程序Node.js Applications with VS Code)。

調試視圖

單擊VS Code左側視圖欄的調試圖標便可打開調試視圖。

調試視圖頂部欄是調試相關的命令與配置，其下方是全部調試信息的展現。

啓動配置

想要在VS Code中調試程序，須要先調整好調試的啓動配置——launch.json。單擊調試視圖頂部欄中的齒輪圖標，並選擇好調試環境，VS Code會在.vscode目錄下爲你生成一份launch.json。

調試Node.js示例：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/app.js",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": null,
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "externalConsole": false,
            "sourceMaps": false,
            "outDir": null
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858,
            "address": "localhost",
            "restart": false,
            "sourceMaps": false,
            "outDir": null,
            "localRoot": "${workspaceRoot}",
            "remoteRoot": null
        }
    ]
}

VS Code支持以調試模式啓動應用，或調試一個已運行的應用。這取決於當前配置中request 的取值(attach仍是launch)，這個屬性是必需的，若是你忘記了如何賦值也不要緊，填寫時VS Code會提示你的。

上例configurations中編寫了name爲Launch和Attach的兩種配置，視圖頂部欄的下拉菜單能夠指定須要以哪一個配置運行，若是選擇的是Launch，那麼接着按下F5就能夠啓動調試了。

如需在啓動調試前執行某個特定任務(task)，爲preLaunchTask設置tasks.json中的任務名便可。

斷點

單擊編輯器側邊緣便可爲所在行添加斷點，調試時BREAKPOINTS區域中也可對斷點進行操做(enable/disable/reapply)。

• 斷點正常顯示爲紅色的圓

• 被取消的斷點是灰色的圓

• 調試啓動後，不能被註冊的斷點顯示爲灰色的圓圈

Reapply All Breakpoints命令可讓斷點重置至其初始位置，這對於調試環境是lazy模式以及還沒被執行的誤置斷點來講十分有幫助。

數據審查

調試視圖的VARIABLES區域能夠審查變量，也能夠直接在源碼上懸停鼠標來查看。變量和表達式的演算則顯示在CALL STACK區域中。

在調試視圖的WATCH區域也能夠看到變量和表達式的演算。

調試控制檯

在調試控制檯能夠計算表達式。打開調試控制檯須要Open Console，該命令能夠在調試視圖頂部欄和命令面板中被找到(Ctrl+Shift+P)。

調試命令

調試一旦啓動，編輯器頂部就會顯示出調試命令欄。

• 繼續 / 暫停 F5

• 跳過 F10

• 進入 F11

• 退出 Shift+F11

• 從新開始 unassigned

• 中止調試 Shift+F5

調試Node

Node控制檯

調試Node時，默認啓用的是VS Code內置的控制檯。內置的調試控制檯不支持輸入，若是你須要從控制檯輸入，那麼你應該使用外部控制檯，在啓動配置中設置externalConsole爲true便可。

斷點驗證

出於性能的考慮，Node.js解析js文件中的函數時採用了「懶加載」模式。其結果是，未被Node.js解析的源碼中的斷點不會起做用。

這一點對於調試工做來講天然是不理想的，因此在調試時VS Code自動添加了--nolazy選項。這樣就能夠阻止延遲解析，並確保斷點能夠在代碼運行前被正常地觸發了。

--nolazy選項會致使啓動時間大大增長，若是你不但願如此，添加--lazy來做爲runtimeArgs的屬性便可。

實際調試工做中，你可能會發現一些你設置的斷點沒有在預期位置被觸發，而是跳到了下一個可執行行。爲了不混淆，VS Code將實時顯示斷點的位置（Node.js判斷的）。在BREAKPOINTS區域，斷點將顯示出其被觸發的位置以及其實際所在行：

啓動一個已添加好斷點的調試，或者在一個已運行的調試中添加了一個新的斷點，斷點都有可能會跳至其餘位置。在Node.js解析完全部代碼以後，使用BREAKPOINTS區域頂部的Reapply按鈕可重置斷點，可讓斷點從新跳回到觸發位置。

函數斷點

除了能在源碼內直接標記斷點外，Node.js的調試如今還能夠經過一個函數的名字來建立斷點，這尤爲適用於未翻閱源碼但知道函數名的狀況。

BREAKPOINTS區域的+能夠添加函數斷點，具體請看下圖：

注意：函數斷點的函數只能是已被定義的全局且non-native函數。

JavaScript源碼關聯

VS Code的Node.js調試器支持JavaScript源碼映射關聯，這將有助於調試一些轉譯語言，好比TypeScript和已被壓縮過的JavaScript。有了源碼關聯，就能夠直接在源碼上標記斷點了。若是源碼映射被破壞或者源碼沒能成功映射到已生成的JS代碼上，斷點將顯示爲灰色的圓圈。

設置啓動配置中的sourceMaps屬性爲true能夠開啓源碼關聯，關聯的源碼將容許單步調試以及在其中添加斷點。另外，你可使用program屬性來指定源碼文件（如：app.ts）。若是被生成的js文件並非和源碼在同一目錄，而是分散放在了其餘的路徑中，你可使用outDir屬性來幫助調試器找到這些文件。不管什麼時候你在轉譯語言源碼中設置了斷點，VS Code都會嘗試在outDir目錄下生成的JavaScript源碼中找到相應位置去映射關聯。

源碼映射關聯並非自動建立的，你必須經過配置TypeScript編譯器來完成：

tsc --sourceMap --outDir bin app.ts

TypeScript調試配置示例：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch TypeScript",
            "type": "node",
            "request": "attach",
            "program": "app.ts",
            "sourceMaps": true,
            "outDir": "bin"
        }
    ]
}

調試外部Node

若是想要使用VS Code的調試器來調試外部Node.js程序，在命令行以下操做：

node --debug program.js
node --debug-brk program.js

--debug-brk選項用於讓程序中止在程序源碼的第一行。

相應的啓動配置示例：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Node",
            "type": "node",
            "request": "attach",
            "address": "localhost",
            "port": 5858,
            "restart": false
        }
    ]
}

restart屬性用來控制Node.js調試器是否在調試結束後自動重啓。若是你使用nodemon在文件改動時重啓Node，restart屬性就會顯得頗有用了。設置restart爲true可讓node-debug自動在Node被終止時重連Node。

使用nodemon啓動Node程序(server.js)

nodemon --debug server.js

提示：按下Stop按鈕能夠中止調試任務並斷開與Node.js的鏈接，但nodemon(以及Node.js)仍會繼續運行，如需中止nodemon，你須要在命令行中手動中止它。

提示：若是程序有語法錯誤，nodemon將不能正常啓動Node，直到全部錯誤都被改正。若是發生了這種狀況，VS Code將繼續嘗試鏈接Node，但會在10秒後放棄重試，固然，你能夠經過timeout屬性(毫秒值)來增長這個時間。

遠程調試

經過address屬性來指定遠程主機(host)就能夠用Node調試器遠程調試了(Node.js版本 >= 4.x)。

默認地，VS Code會將遠程的Node目錄鏈接至本地VS Code，並將代碼顯示到一個只讀的編輯器上。你能夠單步調試這些代碼，但不能修改它們。若是想去編輯源碼，那麼你須要映射遠程和本地。attach啓動配置中設置localRoot和remoteRoot屬性能夠映射遠程和本地(支持不一樣操做系統之間的映射)。

常見問題

Q: 都支持哪些調試場景？

A: Linux、OS X以及Windows下支持調試Node.js程序。Linux、OS X下支持調試運行在Mono上的C#程序。ASP.NET 5應用程序的編譯使用的是Roslyn而不是Mono，其調試能夠經過VS Code擴展程序進行。

Q: 調試視圖的下拉菜單裏我並無看到可選的啓動配置啊？

A: 頗有多是由於launch.json文件尚未被生成，抑或是該文件中存在語法錯誤。

Q: Node調試須要什麼版本的Node呢？

A: 推薦Node.js的LTS版。