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

作為前端開發工程師，以往我們開發的JavaScript程式都執行在瀏覽器端，利用Chrome提供的開發者工具就可以方便的進行原始碼斷點除錯。其步驟有四，詳情不表，粗略概括如下：

開啟Chrome開發者工具；點選進入Sources標籤頁，在頁面的左側就能看到JS程式碼的目錄；找到需要設定斷點的原始檔，在需要中斷的哪行程式碼左側單擊滑鼠左鍵，就可以設定斷點，如果你的程式碼是uglify過的，則需匯入相應的source-map來對映原始碼。重新整理頁面（如果設定斷點的位置是一個事件處理函式，則直接觸發這個事件即可），程式碼執行到斷點處的時候，程式就會掛起，這時候用滑鼠hover就可以檢視當前各個變數的數值，並以此判斷程式是否正常運行了。

但是，當我們用JavaScript開發執行在服務端的Node.js程式時，Chrome開發者工具暫時派不上用場了。雖然也有辦法實現在Chrome上除錯，不過這不是今天我們討論的範圍。

還有，說用console.log的那位同學，請你先不要說話…

實際上，許多IDE都集成了Debug的功能，包括較新版本的WebStorm就對Node.js除錯支援得很好。

但是很多開發人員會覺得IDE太重，有沒有更輕量級一些的工具來實現斷點除錯呢？今天就要給大家安利一下在VScode上進行斷點除錯的方法。

VScode除了out-of-box支援JavaScript和TypeScript，還支援Node.js除錯，簡直就是為前端工程師而生的，對不對…

要除錯Node.js的前提是，你的電腦上已經安裝了Node.js的環境。

什麼？怎麼安裝Node.js?給你一點小提示：開啟百度，搜尋【安裝Node.js】，好了，不能提示更多了。

本文以除錯express應用為例，並假設您已經安裝好了Node.js執行環境。

建立express應用

我們使用express-generator建立一個新的express應用。

1.在全域性安裝express-generator

a.開啟終端，輸入： npm install express-generator -g MacBook使用者全域性安裝的時候記得在前面加上sudo

b.安裝完成之後，在終端輸入 express -v

2.生成express應用目錄，假設這個應用的名稱為myapp 在終端輸入 express myapp 在當前目錄就生成了一個myapp目錄，目錄結構如下：

可以看到，這個小應用已經五臟俱全，有Node伺服器配置，公共資原始檔夾，師徒資料夾，以及路由配置。

3.執行express應用

a.在終端中輸入指令

cd myapp && npm install

就可以進入專案目錄並安裝所有依賴，這一步可能需要比較長的時間，耐心等待安裝完成。

b.然後輸入指令

npm start

就可以啟動應用。

這時我們在瀏覽器中訪問localhost:3000，即可看到如下頁面：

這就說明express應用可以正常執行，接下來我們就可以使用VScode除錯程式碼了。

提示：為了避免除錯時的埠衝突，我們先回到剛剛執行express應用的終端，ctrl+c關閉正在執行的express應用。

除錯express應用

1.進入VScode介面，點選介面左邊的第四個類似蟲子的按鈕，進入除錯介面：

2.點選頁面上方“沒有配置”下拉選單，選擇“新增配置”。

3.選擇Node.js環境。

4.選擇完成之後，在專案的根目錄中會生成一個.vscode的目錄，這個目錄中存放了各種各樣的VScode編輯器的配置。現在這個目錄中就包含了一個檔名為lanuch.json的配置檔案，配置檔案的內容如下：

其中最重要的配置項就是“Program”欄位，這個欄位定義了整個應用的入口，開啟偵錯程式的時候會從這個入口啟動應用。

我們發現當前這個欄位已經有值了，不要慌，那是因為VScode在初始化這個配置檔案的時候，會檢視package.json中是否有包含了鍵名為start的scripts，如果有的話，就會把start配置的內容作為“program”欄位的值。

5.點選開始除錯按鈕（綠色三角形），就可以開始除錯。這時介面上方就會出現一個除錯控制的面板，頁面右下方會出現一個除錯控制檯，可以檢視你輸出的資訊，在介面下放會出現一個狀態列，當前的橘黃色表示應用在正常執行，如下圖所示：

6.我們再次在瀏覽中訪問localhost:3000，會發現頁面可以開啟，應用已經正常啟動了。

7.接下來我們開始給應用設定斷點。我們開啟myapp/routes/index.js檔案，這個檔案配置了應用根路徑的路由，當前的處理是返回一個頁面，傳入字串"Express"作為檢視的引數。

8.我們用滑鼠在行號6的左邊單擊左鍵，就可以設定一個斷點。注意，新增斷點之前要先關閉除錯，關閉的方法是點選介面上方的除錯控制面板中的停止按鈕（紅色正方形）。

9.設定完斷點之後，重新啟動除錯，然後在瀏覽器中訪問localhost:3000，這時候，斷點的形狀發生了變化，程式停留在了斷點，除錯控制面板的按鈕也發生了變化，從左到右依次是單步跳過，單步除錯，單步跳出，重啟，停止除錯。這幾個都是常見的斷點除錯指令。設定完斷點之後，重新啟動除錯，然後在瀏覽器中訪問localhost:3000，這時候，斷點的形狀發生了變化，程式停留在了斷點，除錯控制面板的按鈕也發生了變化，從左到右依次是單步跳過，單步除錯，單步跳出，重啟，停止除錯。這幾個都是常見的斷點除錯指令。

10.在介面的左邊，可以檢視當前上下文環境，也可以設定變數監聽。

11.將滑鼠防止在斷點前的變數或者引數上，也可以檢視該變數當前的數值，體驗與Chrome開發者工具的除錯一致。

到此這篇關於vscode除錯node.js的實現方法的文章就介紹到這了,更多相關vscode除錯node.js內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！