安裝完成后
打開，你會在面板頂部看到兩個新的標(biāo)簽頁：?? Components（組件）和 ?? Profiler（性能分析器）

一、使用 Components 面板調(diào)試 React
Components 面板是調(diào)試 React 應(yīng)用的核心工具：
查看組件樹：左側(cè)面板顯示了整個應(yīng)用的組件層級結(jié)構(gòu)。點擊任何一個組件，可以在右側(cè)面板查看其詳細信息。
檢查 State 和 Props：右側(cè)面板會顯示所選組件當(dāng)前的 props（屬性）、state（狀態(tài)）、context（上下文）和 Hooks。
你可以實時編輯這些值，觀察應(yīng)用界面的變化，這對于測試不同場景非常有用。
定位組件到源代碼：在右側(cè)面板或組件樹中，點擊一個組件，然后通常可以在右側(cè)找到一個指向源代碼的鏈接（如果你的項目配置了源映射 [source maps]），點擊即可跳轉(zhuǎn)到 Sources 面板對應(yīng)的代碼行。
與 Console 聯(lián)動：在 Components 面板選中一個組件后，切換到 Console（控制臺）面板，輸入 $r 即可訪問該組件的實例，可以直接在控制臺調(diào)用其方法或查看內(nèi)部數(shù)據(jù)。

二、使用 Sources 面板進行斷點調(diào)試
對于更深入的 JavaScript 邏輯調(diào)試（例如，查找 bug 發(fā)生在哪一行代碼），你需要使用標(biāo)準的 Chrome DevTools Sources（源代碼）面板。
導(dǎo)航到 Sources 面板：在 DevTools 頂部標(biāo)簽頁中選擇 Sources。
查找源代碼文件：在左側(cè)文件樹中，找到你的 React 項目文件（通常在 webpack:// 或 http://localhost:3000/static/js/ 等路徑下）。
設(shè)置斷點 (Breakpoints)：
找到你想要暫停執(zhí)行的代碼行，點擊行號左側(cè)的空白區(qū)域，會出現(xiàn)一個藍色標(biāo)記，表示斷點已設(shè)置。
你也可以直接在代碼中使用 debugger; 語句來強制在某一行暫停執(zhí)行。
執(zhí)行和調(diào)試控制：當(dāng)代碼執(zhí)行到斷點時，會暫停。使用 Sources 面板右上角的控件來控制代碼執(zhí)行流程：
Resume script execution (繼續(xù)執(zhí)行)
Step over next function call (單步跳過)
Step into next function call (單步進入)
Step out of current function (單步跳出)
監(jiān)控變量：在斷點暫停時，右側(cè)面板的 Scope（作用域）、Watch（監(jiān)控）、Call Stack（調(diào)用堆棧）和 Breakpoints 區(qū)域會顯示當(dāng)前作用域內(nèi)的變量值、函數(shù)調(diào)用棧等信息，幫助你分析代碼狀態(tài)。

三、使用 Profiler 面板進行性能優(yōu)化
Profiler 面板用于記錄和分析 React 組件的渲染性能。
切換到 ?? Profiler 面板。
點擊左上角的“錄制 (Record)”按鈕，然后在你的應(yīng)用中進行操作（如點擊、滾動等）。
停止錄制后，你將看到一個火焰圖 (Flamegraph) 或排序列表 (Ranked)，顯示哪些組件渲染耗時最長，從而定位性能瓶頸。
結(jié)合使用這些工具，你將能夠高效地調(diào)試和優(yōu)化你的 React 項目。