前言

在開發的過程中，幾乎不可能一次性就能寫出毫無破綻的程序，斷點調試代碼是一個普遍的需求。

vscode 是一個非常棒的編輯器，內置功能強大的調試能力。經過簡單的設定，就可以對 js 文件進行調試。但有時我們想要調試的內容是經過編譯的，當然我們可以直接調試編譯后的代碼。但經過編譯壓縮以后的代碼，可讀性很差，且也可能無法分模塊查看了，有什么方法進行編譯前的代碼調試么？答案當然是肯定的。

下面話不多說了，來一起看看詳細的介紹吧。

vscode 的常規調試

vscode 的調試界面在窗口最左邊：

最新版本的vscode，該選項默認隱藏了，需要自己打開。

首次打開調試界面時，當前沒有任何調試配置，我們可以點擊齒輪 icon 添加一個：

選擇 nodejs 后，會自動在當前工程目錄下添加 .vscode/launch.json 文件，這個文件就是 vscode 調試配置文件。

一個簡易的配置文件內容為：

{ // 使用 IntelliSense 了解相關屬性。  // 懸停以查看現有屬性的描述。 // 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "啟動程序", "program": "${workspaceFolder}/index.js" } ]}

上面這個配置所做的工作是啟動當前目錄下的 index.js 文件進行調試。

我們也可以設置每次摁 F5 時自動調試當前打開的文件，只需要修改 program：

{ "program": "${file}"}

調試編譯后的文件

想要調試編譯后的文件，需要對 launch.json 文件進行設置。

vscode 要想調試編譯后的代碼，他需要知道哪些代碼是經過編譯的，且需要知道編譯后的代碼與編譯前代碼的對應關系。

其實理論上 vscode 是可以把每個要執行的文件都認為是編譯后的文件，進行源文件的查找？我猜是因為性能原因，我們需要自己指定哪些文件是編譯后的文件。在 launch.json 中，使用outFiles屬性來指定編譯后的產出文件：

{ "version": "0.2.0", "configurations": [ { // 省略其他設置... "outFiles": [ "${workspaceFolder}/lib/*.js", ] // ... } ]}

雖然有些麻煩，但好在我們可以使用通配符。

現在有了編譯后的文件，vscode 還需要知道源文件，以及編譯后文件與源文件的對應關系，聽著有沒有很熟悉？這個過程就是通過 sourcemap 來進行實現的。

我們需要在編譯 js 文件時生成相應的 .map 文件，并在產出 js 文件后面附加 .map 文件的地址：

//@ sourceMappingURL=./index.js.map

ok，現在 vscode 在執行 js 文件時，會從 outFile 中查找是否是編譯后的代碼，如果是，就通過 sourcemap 映射到源代碼，方便我們進行調試。

自動執行編譯

現在我們的開發流程變成了：修改源代碼 -> 編譯源代碼 -> 調試。

為了方便，我們可以設置preLaunchTask屬性，該屬性的作用是每次調試前執行一個前置任務，我們可以把編譯過程放在前置任務里。

首先我們需要來配置一個task，task的配置文件在 .vscode/tasks.json，可以打開 command palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 選擇“任務：配置任務”自動生成一個：

{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [ { "label": "build", "type": "npm", "script": "build", "problemMatcher": [] } ]}

這里我們配置了npm run build作為前置任務，每次執行調試時都會先進行 build。

示例配置文件

{ // 使用 IntelliSense 了解相關屬性。  // 懸停以查看現有屬性的描述。 // 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "example", "program": "${workspaceFolder}/index.js", "preLaunchTask": "build", "cwd": "${workspaceFolder}", "outFiles": [ "${workspaceFolder}/lib/*.js" ] }

相關文檔

• Debugging in Visual Studio Code
• Tasks in Visual Studio Code

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。