react-devtools

### 次要变更 - [#58](https://github.com/callstackincubator/agent-react-devtools/pull/58) [`d4b1e2c`](https://github.com/callstackincubator/agent-react-devtools/commit/d4b1e2c644d40a66d60f24d41b7c37da8f1bf227) 感谢 [@V3RON](https://github.com/V3RON)！- 通过 CommonJS Metro 包装器和原生引导入口导入，自动配置标准 React Native 和 Expo 项目。不支持的 Metro 格式和有歧义的项目保留文档中记录的手动设置路径。

### 次要变更 - 0c307e2: 跟踪并暴露组件错误/警告计数 组件现在从 React DevTools 协议（`UPDATE_ERRORS_OR_WARNINGS` 操作）跟踪错误和警告计数。 - 新增 `errors` 命令列出错误或警告计数非零的组件 - `get component` 输出在非零时包含错误/警告计数 - 树、搜索和组件输出会标注受影响的组件（例如 `@c5 [fn] Form ⚠2 ✗1`） - 65c391f: 添加 `profile diff ` 命令 - 并排比较两个性能分析导出文件 - 显示退化、改进、新增和移除的组件 - 按显示名称聚合，计算平均/最大持续时间差值 - 可配置阈值过滤掉不显著变化的噪声（默认 5%，使用 `--threshold` 调整） - 无需守护进程 - 完全基于导出的 JSON 文件工作 - 5c5ace6: 添加 `profile export ` 命令 - 将性能分析会话导出为与 React DevTools Profiler 兼容的 JSON 文件 - 在浏览器扩展的 Profiler 标签页中导入该文件，以可视化火焰图、排名图表和提交时间线 - 包含提交数据、fiber 持续时间、变更描述、effect 持续时间和组件快照 - b0e64b8: `profile timeline` 的分页和排序 大型性能分析会话不再用数百次提交淹没 agent 上下文： - **默认限制为 20**：除非指定 `--limit N`，`profile timeline` 最多返回 20 条记录。 - **`--offset N` 标志**：跳过前 N 次提交以进行分页。 - **`--sort duration`**：按渲染持续时间排序提交（最慢的在前），而不是按时间顺序。 - **分页头部**：分页时输出显示 `Commit timeline (showing 1–20 of 87):`，当所有结果适合一页时显示 `Commit timeline (87 commits):`。 - a1bed65: 针对大型组件树的智能树截断和子树提取 大型 React 应用（500-2000+ 组件）现在产生更小的 `get tree` 输出： - **默认主机过滤**：``、`` 和其他主机组件被隐藏（使用 `--all` 显示它们）。带 key 或自定义元素名称的主机组件始终显示。 - **兄弟节点折叠**：当父节点有许多具有相同显示名称的子节点（例如列表项）时，只显示前 3 个，并附带 `... +N more ComponentName` 摘要。 - **摘要页脚**：输出以 `N components shown (M total)` 结尾，以便 agent 知道过滤了多少。 - **`--max-lines N` 标志**：输出行数的硬性上限，以保持在上下文预算内。 - **子树提取**：`get tree @c5` 仅显示以特定组件为根的子树。标签在子树内从 `@c1` 重新分配。与 `--depth N` 结合使用以限制子树内的深度。 - c7127db: 添加 `uninit` 命令以撤销框架配置 `agent-react-devtools uninit` 移除 `init` 所做的更改 — 将你的配置文件恢复到原始状态。 - 支持所有框架：Vite、Next.js（Pages Router 和 App Router）、CRA - `--dry-run` 标志预览将要移除的内容而不写入任何文件 - 在未由 `init` 配置的项目上运行是安全的（无操作） ### 补丁变更 - 68bd0fc: 当 CLI 检测到二进制文件自守护进程启动以来已重新构建时，自动重启守护进程。此前，重新构建包需要手动停止并重启守护进程才能使更改生效。 - 90d1344: 修复组件检查崩溃和无法解析的查找结果 - 修复了 hook 解析中的崩溃，该崩溃导致 `get component` 在受影响应用中的所有组件上静默超时 - 标记树范围之外的组件现在在 `find` 结果中显示可用的 ID（例如 `@c?(id:667)`）

### 次要变更 - e9c8a60: 在 `status` 和 `get tree` 中显示连接健康状况 - 在 `status` 中显示最后一次连接事件（例如 "app reconnected 3s ago"） - 当 `get tree` 在断开连接后返回空时显示上下文提示 - 20ce273: 标准化所有 CLI 输出中的组件引用格式 所有格式化器现在产生一致的 `@cN [type] Name` 引用。此前，树和搜索命令使用 `@c1 [fn] "Name"`，而性能分析命令省略了标签、类型标记或两者。 **输出格式的破坏性变更：** - 组件名称不再加引号：`@c1 [fn] App` 而不是 `@c1 [fn] "App"` - Key 使用 `key=value` 而不是 `key="value"` - 性能分析命令（`profile slow`、`profile rerenders`、`profile stop`、`profile commit`）现在包含 `@cN` 标签和 `[type]` 标记 - `profile slow` 和 `profile rerenders` 显示所有渲染原因，而不仅仅是第一个 - `profile report` 现在在头部包含 `[type]` 标记 - 从性能分析输出中移除了列对齐填充，改为一致的 `formatRef` 格式化 - 05090ca: 在性能分析输出中呈现具体的变更 prop/state/hook 键 性能分析报告和提交详情现在显示_哪些_ props、state 键和 hooks 发生了变化，而不仅仅是_它们_发生了变化。 - `profile report` 和 `profile slow` 追加 `changed: props: onClick, className state: count` 行 - `profile rerenders` 和 `profile commit` 为每个组件包含相同的详细信息 - 在聚合报告中跨提交对键进行去重 - 空键不产生额外输出（向后兼容） - e9c8a60: 添加 `wait` 命令 - `wait --connected` — 阻塞直到 React 应用连接 - `wait --component ` — 阻塞直到命名组件出现在树中 - 两者都支持 `--timeout`（默认 30 秒），超时时以非零状态退出 ### 补丁变更 - 303f9e4: 修复了当 `reactDevtools()` 插件添加到 `vite.config.ts` 时 Vite HMR（热模块替换）中断的问题。connect 模块现在在替换 devtools hook 时保留 react-refresh 运行时的注入包装器，因此 Fast Refresh 和 devtools 检查都能正常工作。

### 补丁变更 - 370ef23: 修复：防止 React 在 devtools hook 安装之前加载的竞态条件 connect 模块的动态 `import('react-devtools-core')` 在 `initialize()` 能够安装 hook 之前让出控制权，允许 react-dom 先加载并错过连接。添加了顶层 `await` 以阻塞依赖模块直到 hook 就绪，并更新了 Vite 插件以在 esbuild 的依赖优化器中启用 `top-level-await`。

### 补丁变更 - 0c2de5b: 添加 Claude Code 技能和插件市场元数据

### 次要变更 - 0c88c11: 零配置应用集成 — 一行代码连接你的 React 应用： - **`agent-react-devtools init`** — CLI 命令，自动检测你的框架（Vite、Next.js、CRA、React Native）并修补正确的配置文件。Next.js App Router 获得一个 `'use client'` 包装器，以便 connect 代码在浏览器中运行。 - **`agent-react-devtools/connect`** — 将 `import 'agent-react-devtools/connect'` 添加为入口点的第一行以连接到守护进程。自动跳过 SSR 和生产构建，永不阻塞你的应用。 - **`agent-react-devtools/vite`** — Vite 插件，自动注入 connect 脚本，无需更改应用代码。 ### 补丁变更 - 10ac53c: 添加包含使用示例的全面 README 和 MIT LICENSE 文件

## 次要变更 - **守护进程、DevTools 桥接和组件树** **守护进程** — 持久后台进程，带有 IPC 服务器（Unix socket），管理连接并分发命令。 **DevTools 桥接** — 实现 React DevTools "Wall" 协议的 WebSocket 服务器。通过 `react-devtools-core` 连接到运行中的 React 应用。 **组件树** — 解析并检查完整的 React 组件层次结构： - 查看组件树及其类型、key 和父子关系 - 检查任何组件的 props、state 和 hooks - 按显示名称搜索组件（模糊或精确匹配） - 按类型统计组件数量 **CLI** — 命令行界面，包含命令：`start`、`stop`、`status`、`tree`、`find`、`count`、`get component`。 **格式化** — 为 LLM 消费设计的 token 高效输出。 - **性能分析器** 启动和停止性能分析会话，以捕获来自已连接 React 应用的渲染性能数据。 - **渲染报告** — 每个组件的渲染持续时间和次数 - **最慢组件** — 按自身渲染时间排名 - **重渲染最多** — 按渲染次数排名 - **提交时间线** — React 提交及其持续时间的时间顺序视图 - **提交详情** — 特定提交的每个组件细分，按自身时间排序 CLI 命令：`profile start`、`profile stop`、`profile report`、`profile slow`、`profile rerenders`、`profile timeline`、`profile commit`。