快捷導(dǎo)航

使用VSCode Debugger調(diào)試React項(xiàng)目的實(shí)現(xiàn)步驟

更新時(shí)間：2025年09月01日 08:21:37 作者：老哥776

本文主要介紹了使用VSCode Debugger調(diào)試React項(xiàng)目的實(shí)現(xiàn)步驟,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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，不妨就從今天開始用起來吧。

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

您可能感興趣的文章: