使用Visual Studio Code對Node.js進行斷點調試

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

做爲前端開發工程師，以往咱們開發的JavaScript程序都運行在瀏覽器端，利用Chrome提供的開發者工具就能夠方便的進行源碼斷點調試。其步驟有四，詳情不表，粗略歸納以下：

1. 打開Chrome開發者工具；
2. 點擊進入Sources標籤頁，在頁面的左側就能看到JS代碼的目錄；
3. 找到須要設置斷點的源文件，在須要中斷的哪行代碼左側單擊鼠標左鍵，就能夠設置斷點，若是你的代碼是uglify過的，則需導入相應的source-map來映射源碼。
4. 刷新頁面（若是設置斷點的位置是一個事件處理函數，則直接觸發這個事件便可），代碼運行到斷點處的時候，程序就會掛起，這時候用鼠標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開發者工具的調試一致。

Well，開啓VScode的Node.js調試之旅吧！！ 那個console.log的同窗，你能夠說話了…