安装完成后
打开，你会在面板顶部看到两个新的标签页：⚛️ Components（组件）和 ⚛️ Profiler（性能分析器）
一、使用 Components 面板调试 React
Components 面板是调试 React 应用的核心工具：
查看组件树：左侧面板显示了整个应用的组件层级结构。点击任何一个组件，可以在右侧面板查看其详细信息。
检查 State 和 Props：右侧面板会显示所选组件当前的 props（属性）、state（状态）、context（上下文）和 Hooks。
你可以实时编辑这些值，观察应用界面的变化，这对于测试不同场景非常有用。
定位组件到源代码：在右侧面板或组件树中，点击一个组件，然后通常可以在右侧找到一个指向源代码的链接（如果你的项目配置了源映射 [source maps]），点击即可跳转到 Sources 面板对应的代码行。
与 Console 联动：在 Components 面板选中一个组件后，切换到 Console（控制台）面板，输入 $r 即可访问该组件的实例，可以直接在控制台调用其方法或查看内部数据。
二、使用 Sources 面板进行断点调试
对于更深入的 JavaScript 逻辑调试（例如，查找 bug 发生在哪一行代码），你需要使用标准的 Chrome DevTools Sources（源代码）面板。
导航到 Sources 面板：在 DevTools 顶部标签页中选择 Sources。
查找源代码文件：在左侧文件树中，找到你的 React 项目文件（通常在 webpack:// 或 http://localhost:3000/static/js/ 等路径下）。
设置断点 (Breakpoints)：
找到你想要暂停执行的代码行，点击行号左侧的空白区域，会出现一个蓝色标记，表示断点已设置。
你也可以直接在代码中使用 debugger; 语句来强制在某一行暂停执行。
执行和调试控制：当代码执行到断点时，会暂停。使用 Sources 面板右上角的控件来控制代码执行流程：
Resume script execution (继续执行)
Step over next function call (单步跳过)
Step into next function call (单步进入)
Step out of current function (单步跳出)
监控变量：在断点暂停时，右侧面板的 Scope（作用域）、Watch（监控）、Call Stack（调用堆栈）和 Breakpoints 区域会显示当前作用域内的变量值、函数调用栈等信息，帮助你分析代码状态。
三、使用 Profiler 面板进行性能优化
Profiler 面板用于记录和分析 React 组件的渲染性能。
切换到 ⚛️ Profiler 面板。
点击左上角的“录制 (Record)”按钮，然后在你的应用中进行操作（如点击、滚动等）。
停止录制后，你将看到一个火焰图 (Flamegraph) 或排序列表 (Ranked)，显示哪些组件渲染耗时最长，从而定位性能瓶颈。
结合使用这些工具，你将能够高效地调试和优化你的 React 项目。
