從瀏覽器中的React開發(fā)人員工具開始，以檢查組件，道具和狀態(tài)。 2。使用Chrome或Microsoft Edge工具擴(kuò)展程序的調(diào)試器設(shè)置VSCODE調(diào)試，通過(guò)創(chuàng)建啟動(dòng)。 JSON配置在http：// localhost上啟動(dòng)該應(yīng)用程序：3000具有源地圖支持。 3。對(duì)於服務(wù)器端React（例如，Next.js），通過(guò)配置啟動(dòng)。 JSON來(lái)運(yùn)行啟用NPM DEV，並啟用了node debugging。 4。使用Console.Log和調(diào)試器；戰(zhàn)略性的聲明以進(jìn)行快速，有效的檢查。 5?？蛇x地啟用源地圖，通過(guò)package.json或webpack配置進(jìn)行分會(huì)，但要避免在生產(chǎn)中以進(jìn)行安全。此外，實(shí)現(xiàn)錯(cuò)誤邊界以捕獲和記錄運(yùn)行時(shí)反應(yīng)錯(cuò)誤。將瀏覽器DevTools與正確配置的VSCODE調(diào)試組合在一起，可確保無(wú)縫客戶端和服務(wù)器端調(diào)試。

正確設(shè)置後，VSCODE中的調(diào)試反應(yīng)應(yīng)用程序可以平穩(wěn)有效。這是使用現(xiàn)代工具和實(shí)踐有效地進(jìn)行操作的方法。

1。使用React開發(fā)人員工具（基於瀏覽器）

在研究VSCODE特定調(diào)試之前，請(qǐng)始終從瀏覽器中的React DevTool （Chrome或Firefox）開始：

• 安裝React開發(fā)人員工具擴(kuò)展。
• 打開DevTools→“組件”和“ Profiler”選項(xiàng)卡，以檢查組件層次結(jié)構(gòu)，道具，狀態(tài)和性能。

這不會(huì)直接使用VSCODE，但對(duì)於快速診斷UI/狀態(tài)問(wèn)題至關(guān)重要。

2。通過(guò)Vscode Chrome（或邊緣）通過(guò)vscode-edge-devtools或Debugger for Chrome進(jìn)行調(diào)試

您可以將VSCODE連接到運(yùn)行的瀏覽器實(shí)例，以在React代碼中設(shè)置斷點(diǎn)。

逐步設(shè)置：

1. 安裝擴(kuò)展名：

   
   • 轉(zhuǎn)到VSCODE擴(kuò)展。
   • 安裝“ Chrome for Chrome” （如果使用Chrome）或“邊緣調(diào)試器” 。
   • 或者，使用較新的內(nèi)置“ Microsoft Edge工具VS代碼” 。

2. 確保您的React應(yīng)用程序正在運(yùn)行：

    NPM開始

   這通常在http://localhost:3000上運(yùn)行。

3. 添加啟動(dòng)配置：

   • 在VSCODE中，進(jìn)行運(yùn)行並調(diào)試（Ctrl Shift D）。
   • 單擊“創(chuàng)建啟動(dòng).json文件”。
   • 選擇鉻或邊緣。
   • 更新配置：

    {
     “版本”：“ 0.2.0”，
     “配置”：[
       {
         “名稱”：“ debug react in Chrome”，
         “ type”：“ chrome”，
         “請(qǐng)求”：“啟動(dòng)”，
         “ url”：“ http：// localhost：3000”，
         “ webroot”：“ $ {workspacefolder}/src”，
         “ sourcemappathoverrides”：{
           “ webpack：/// src/*”：“ $ {webroot}/*”
         }
       }
     這是給出的
   }

4. 開始調(diào)試：

   • 單擊運(yùn)行和調(diào)試按鈕（綠色播放圖標(biāo)）。
   • VSCODE將打開一個(gè)新的Chrome/Edge窗口。
   • 在您的.js或.tsx文件中設(shè)置斷點(diǎn) - 在執(zhí)行代碼時(shí)，它們會(huì)擊中。

？提示：斷點(diǎn)在通過(guò)源地圖正確映射的文件中最有效（默認(rèn)情況下，Create App將處理此操作）。

3。使用vscode node.js進(jìn)行調(diào)試（用於SSR或後端邏輯）

如果您使用SSR的React（例如Next.js） ，則可以直接調(diào)試服務(wù)器端代碼。

Next.js的示例：

1. 在launch.json中：json：

    {
     “名稱”：“ debug next.js”，
     “ type”：“ node”，
     “請(qǐng)求”：“啟動(dòng)”，
     “ Runtime Executable”：“ NPM”，
     “ runtimeargs”：[“ run”，“ dev”]，，
     “港口”：9229，
     “ cwd”：“ $ {workspacefolder}”，
     “控制臺(tái)”：“ IntegratedTerminal”
   }

2. 開始從VSCODE進(jìn)行調(diào)試 - API路由或服務(wù)器端功能中的斷點(diǎn)現(xiàn)在可以工作。

4。在戰(zhàn)略上使用console.log和debugger

即使使用高級(jí)工具，簡(jiǎn)單的方法也有幫助：

• 插入debugger;在您的代碼中：

   useeffect（（）=> {
    調(diào)試器; //到達(dá)瀏覽器時(shí)停止執(zhí)行
    setData（processData（props.unput））;
  }，[props.unput]）;

• 使用標(biāo)籤使用console.log ：

   console.log（“用戶狀態(tài)：”，用戶）;

這些可以開箱即用，通常要快速檢查。

5。啟用生產(chǎn)源圖（可選）

用於調(diào)試分階段環(huán)境中的縮小代碼：

• 在package.json中，設(shè)置：

   “ generatesourcemaps”：true

• 或在WebPack配置中（如果彈出），請(qǐng)確保devtool: 'source-map' 。

除非必要，否則出於安全原因永遠(yuǎn)不會(huì)在生產(chǎn)中啟用生產(chǎn)源地圖。

獎(jiǎng)金：使用錯(cuò)誤邊界和記錄

對(duì)於運(yùn)行時(shí)反應(yīng)錯(cuò)誤（例如，渲染錯(cuò)誤），源地圖和瀏覽器DevTools是您最好的選擇。考慮添加錯(cuò)誤邊界：

類errorBoundary擴(kuò)展了react.component {
  ComponentDidCatch（錯(cuò)誤，信息）{
    Console.Error（“反應(yīng)錯(cuò)誤：”，錯(cuò)誤，信息）;
  }
  Render（）{返回this.props.children; }
}

包裝組件以捕獲和日誌問(wèn)題。

基本上，鑰匙是通過(guò)正確的啟動(dòng)配置將瀏覽器DevTools與VSCODE的調(diào)試功率相結(jié)合。設(shè)置後，您可以無(wú)縫調(diào)試客戶端和服務(wù)器代碼。

並不復(fù)雜 - 但很容易錯(cuò)過(guò)一步。

以上是如何調(diào)試在VScode中反應(yīng)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！