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

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

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

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

1 配置VSCode Debugger 的launch.json文件

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

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

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

其中，name字段表示調(diào)試你這個調(diào)試腳本的名字，你可以自定義url字段比較重要，你需要把url地址改為你的本地項目運行的地址，否則，你將無法調(diào)試你的項目

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

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

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

你會發(fā)現(xiàn)它啟動了瀏覽器，并打開了這個 url：

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

在代碼打個斷點，然后點擊

刷新：

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

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

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

那異常斷點的按鈕呢？在窗口的左下角

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

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

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

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

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

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

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

到此這篇關(guān)于使用VSCode Debugger調(diào)試React項目的實現(xiàn)步驟的文章就介紹到這了,更多相關(guān)VSCode Debugger 調(diào)試React內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論