#Preact Devtools 面板

Preact Devtools 面板可帮助你检查 ReactLynx 组件的层次结构，展示组件的 Props, State 以及所处文件路径等信息。Preact Devtools 面板基于 Web 中的 Preact Devtools 浏览器插件，与其具有相同的使用体验。

#概览

使用 Preact Devtools 面板执行以下操作：

• 查看 ReactLynx 的组件结构
• 对 Props 或 State 进行修改并实时查看结果
• 使用 ClickToComponent 定位到组件源码
• 使用 Profiler 分析应用性能

#打开 Preact Devtools 面板

在 DevTool 窗口的主面板中点击 Preact Devtools 选项卡即可打开。

注意，在使用 Preact Devtools 面板之前，需要在 ReactLynx 应用的入口中第一行导入 @lynx-js/preact-devtools:

import '@lynx-js/preact-devtools';

开发构建（rspeedy dev）默认就带上了面板所需的运行时钩子。生产构建（rspeedy build）默认会把它们连同 @lynx-js/preact-devtools 一起裁掉，如果你要调试一个生产构建的产物，构建时加上 REACT_DEVTOOL=true：

REACT_DEVTOOL=true rspeedy build

#查看组件结构

Preact Devtools 面板的左侧展示了 ReactLynx 应用完整的树状结构和组件名称等信息，右侧展示了当前选中的组件的详细的 Props、State 及文件路径等信息。

将鼠标悬停在某个组件上，即可在左侧预览窗口高亮出对应组件的盒模型。

#查看并修改 Props 或 State

在 Preact Devtools 面板的右侧，可以直接对组件的 Props 或 State 状态进行修改，ReactLynx 应用的 UI 会实时更新。

如下图所示，我们将 Counter 组件内部的计数用的 State 从 1 修改为 2，页面内容中的计数器 UI 也从 1 变成了 2。

#ClickToComponent 定位源码

我们在 Preact Devtools 面板中集成了 ClickToComponent 能力，点击 source location 下的文件路径，会自动使用 VSCode 打开组件所在文件并定位到组件所在的行列号。

#Profiler

Profile 面板支持对 ReactLynx 组件在后台线程的渲染耗时进行性能分析。点击左上角的按钮开始，等待应用运行一段时间后，再次点击左上角的按钮结束，此时你会得到 Preact 这段时间所有 Commit 的耗时信息，并可以看到同一 Commit 下的各个组件的耗时。