视觉诊断查看器

打开报告查看器。从 router.diagnostics.export() 导入 JSON 报告，以比较逻辑历史记录和原生历史记录、检查导航范围并遵循重定向。它无需连接到应用程序即可工作。

实际的浏览器工具：导入示例报告、比较原生不匹配、过滤被拒绝的 导航守卫 并检查截断的缓冲区。综合数据，而不是设备基准。

收集并打开报告

在应用程序中启用现有的选择加入收集器：

const router = createRouter({
  routes,
  diagnostics: __DEV__ ? { maxEvents: 1000 } : false,
})

// Use the application's own file/debug sharing mechanism to save this as JSON.
const report = router.diagnostics?.export()

打开查看器并选择 打开 JSON 报告。您最多可以保留八个独立的捕获，每个捕获最多 10 MiB 和 10,000 个事件。支持版本1报告；无效的 JSON、不受支持的版本和格式错误的字段会产生特定于文件的错误，而不会替换已打开的报告。未知的额外字段将被丢弃，不会显示为任意有效负载。

探索示例报告用三个明确的综合教学报告替换打开的文件：导航调查、截断的缓冲区和独立窗口。 350 ms 导航守卫 和 80 ms 安装说明了时间线；它们不是性能阈值或基准。

比较快照

侧边栏选择捕获。即使它们的路由器、导航栈 或窗口 ID 恰好匹配，文件也保持独立：ID 对于进程/收集器来说是本地的，并且单独导出的文件不是一个连续的记录。

Stack 比较 在其有序原生条目旁边显示每个 导航栈 的逻辑条目，以及主机角色、窗口 ID 和加载状态。 null 是非托管原生页面。查看器突出显示不同的位置并单独列出收藏家的快照发行代码。繁忙的 导航栈 会推迟比较，而不是声明正在进行的转换已损坏。大型 导航栈 收藏和历史均已分页。

active 条目在其 导航栈 中被发现。这并不能证明它的选项卡/窗口具有焦点。窗口过滤器使用记录的主机/事件窗口ID；省略的 ID 显示为未知。主机位于多个窗口中的 导航栈 会保留这些主机标签，而不是分配一个猜测的所有者。快照问题和摘要指标始终描述整个选定的捕获，即使窗口过滤器缩小了显示的 导航栈 或时间线也是如此。

这是时间点报告，而不是持久的导航状态。查看器无法编辑原生 导航栈 或恢复应用程序。

阅读时间线

Timeline 在所选捕获中按范围 ID 配对开始/结束事件，按导航 ID 关联请求，并将重定向请求链接到其父级。按阶段、结果、请求或窗口进行过滤；选择一行以查看记录的标识符和字段。重叠的请求保留单独的行。大时间线每页显示 100 行；过滤器和页面导航覆盖了完整的保留缓冲区。

观察	如何解释它
长 导航守卫	过滤器 guard。其持续时间衡量导航守卫调用； detail 标识 导航守卫 类别。
大型同步安装	滤波器 mount。这包括Vue设置和原生视图创建；它不会隔离设置成本。
拒绝导航	过滤器 aborted 或 cancelled；检查导航 ID 和相关的 导航守卫 行。
重定向	redirected 结束原始请求；子行的父链接选择原始导航 ID。
缺少开始	结束的持续时间显示为 reported，其中有一个点位于记录的结束处。没有发现缺失的起始位置。
缺少结束	一个点标记保留的开始；不会从快照时间推断出持续时间或完成情况。
冲突边界	重复或不一致的跨度边界标记不明确，并且不会获得捏造的持续时间。

当过滤器更改时，时间线比例保持与完整保留的事件范围相关。阶段持续时间重叠：transition 包括安装，并且 导航守卫/队列工作可以跨请求交错。不要添加行持续时间或将其总和视为总导航时间。最长的 导航守卫/挂载卡考虑保留的报告持续时间，并且不重建丢弃的事件。仅结束跨度仍然可以携带报告的持续时间；截断横幅仍然可见。

缓冲区丢失、边界丢失和空捕获是明确的。 clear() 还可以删除较早的事件而不增加丢弃计数。挂钟起源是近似上下文；时间线值使用收集器的单调时钟。这些测量并不能确定 FPS、第一像素延迟或原生堆使用情况。使用原生分析器来解决这些问题。

本地和离线使用

查看器在浏览器选项卡中读取内存中的文件。它没有上传端点、实时传输、分析、浏览器存储或运行时连接。重新加载或选择 清除报告 会删除打开的捕获。它是一个独立于文档外壳的独立页面；构建的 HTML 通过内容安全策略阻止网络连接，并包含其自己的脚本/样式。

选择 下载离线查看器 以保存该 HTML。在浏览器中打开下载的文件，无需网络连接即可导入报告。工具栏支持英语和葡萄牙语。如果托管浏览器禁止本地文件脚本，请改为在本地主机上提供构建的目录。

要从存储库签出构建或开发它：

npm ci
npm run diagnostics:build
# Open docs/public/diagnostics-viewer/index.html in a browser.

npm run diagnostics:dev
npm run diagnostics:typecheck

docs:build 还构建了查看器。它的源代码位于 tools/diagnostics-viewer 下，位于已发布运行时的 src/dist 之外； NativeScript 应用程序中未安装查看器侦听器或依赖项。浏览器回归检查及其可选的 Playwright 设置记录在 scripts/diagnostics-viewer/README.md 中。

现有收集器的 隐私规则 保持不变：它导出路由模式和应用程序定义的名称，而不是参数、查询、属性、结果或异常负载。不要将个人数据包含在这些姓名中。导入验证无法证明手动修改的报告字符串不包含敏感数据。