一般我們調(diào)試代碼時(shí)，用的最多的應(yīng)該就是console.log方式了，還有的是使用Chrome DevTools 通過在對(duì)應(yīng)的

sourcemap代碼位置打斷點(diǎn)進(jìn)行調(diào)試，除了上面兩種方式外還有一種更好用的調(diào)試方式： VSCode Debugger。

VSCode Debugger可以直接在你的項(xiàng)目源碼打斷點(diǎn)，進(jìn)行一步一步的調(diào)試，就像下面這樣。

接下來，我以React項(xiàng)目為例，使用 VSCode Debugger 進(jìn)行代碼調(diào)試

1 配置VSCode Debugger 的launch.json文件

點(diǎn)擊VSCode左側(cè)菜單欄的 運(yùn)行和調(diào)試 按鈕，之后點(diǎn)擊 創(chuàng)建launch.json文件，會(huì)彈出一個(gè)彈窗，選擇Web 應(yīng)用（chrome）表示使用chrome瀏覽器進(jìn)行調(diào)試，如果你想使用Edge瀏覽器，就選擇Web 應(yīng)用（Edge）選項(xiàng)即可，我這里使用chrome進(jìn)行調(diào)試

創(chuàng)建的launch.json文件文件內(nèi)容如下

{"version": "0.2.0","configurations": [{"name": "調(diào)試React項(xiàng)目","request": "launch","type": "chrome","url": "http://localhost:8080","webRoot": "${workspaceFolder}"},]
}

其中，

name字段表示調(diào)試你這個(gè)調(diào)試腳本的名字，你可以自定義

url字段比較重要，你需要把url地址改為你的本地項(xiàng)目運(yùn)行的地址，否則，你將無法調(diào)試你的項(xiàng)目

其實(shí)，你會(huì)發(fā)現(xiàn)，你做完上面的操作后，會(huì)在項(xiàng)目的根目錄創(chuàng)建一個(gè).vscode的文件夾，里面存放著launch.json文件，所以，你其實(shí)完全可以在你的項(xiàng)目根目錄創(chuàng)建一個(gè).vscode的文件夾，存放launch.json文件即可。

2 進(jìn)入Debug窗口，啟動(dòng)調(diào)試

你會(huì)看到，這里顯示的是 調(diào)試React項(xiàng)目，這個(gè)就是launch.json中的name字段，你完全可以自定義該字段

你會(huì)發(fā)現(xiàn)它啟動(dòng)了瀏覽器，并打開了這個(gè) url：

VSCode 里還會(huì)有一排控制執(zhí)行的按鈕：

在代碼打個(gè)斷點(diǎn)，然后點(diǎn)擊

刷新：

代碼會(huì)執(zhí)行到斷點(diǎn)處斷住，本地和全局作用域的變量，調(diào)用棧等都會(huì)展示在左邊：

上面的控制按鈕分別對(duì)應(yīng)暫停、單步執(zhí)行、進(jìn)入函數(shù)調(diào)用、跳出函數(shù)調(diào)用，這個(gè)和 Chrome DevTools 一樣：

還多了刷新和停止的按鈕。

那異常斷點(diǎn)的按鈕呢？在窗口的左下角

可以在被 catch 的異常處斷住，也可以在沒有被 catch 的異常處斷住。

看起來和 Chrome DevTools 里調(diào)試差不多呀，在 VSCode Debugger 里調(diào)試有啥好處么？

好處是不用切換工具呀，之前是調(diào)試在 Chrome DevTools，寫代碼在 VSCode，而現(xiàn)在寫代碼和調(diào)試都可以在 VSCode 里，可以邊調(diào)試邊寫代碼。

比如我想訪問 this 的某個(gè)屬性，可以在 Debug Console 里輸入 this 看下它的值，然后再來寫代碼：

也可以在監(jiān)視窗口輸入你想要監(jiān)視的內(nèi)容

這樣就實(shí)現(xiàn)了和 Chrome DevTools 一樣的調(diào)試功能。

如果你還沒用過 VSCode Debugger，不妨就從今天開始用起來吧。