企业官网建设流程全解析

Lynx 调试工具链实用指南：10 分钟跑通 Inspector

【免费下载链接】lynxEmpower the Web community and invite more to build across platforms.项目地址: https://gitcode.com/GitHub_Trending/lynx10/lynx

低端机上一滑动帧率就从 60 掉到 18，内存曲线一天天长，却说不清涨在哪——你甚至不知道该先查什么。Lynx 调试工具链就是为这种时刻准备的：它基于 CDP 协议把性能、内存、DOM、网络、JS 调试统一挂到一个 Inspector 上，Android、iOS、鸿蒙共用一套。下面按你实际动手的顺序走一遍。

先看这张集成测试里跑出来的真实页面，这就是 Inspector 挂上后，你能在调试面板里直接看到的东西。

把 Inspector 接进项目：一行 Attach 建立会话

调试器通过 WebSocket 连到 Lynx 实例后，核心就一件事：调 Attach 传入调试页的 url 建立会话。它内部会触发 RegisterDomainAgents，把 Performance、Memory、DOM、Network、UITree、Tracing 等二十多个领域 Agent 一次性挂上，之后你在 Chrome DevTools 或任何 CDP 客户端里发的标准命令，都会被路由到对应 Agent。命令不通的话，先确认 devtool 开关已打开、跑的是可调试构建。

跑起来看数据：帧率、内存、JS 执行

帧率。指标是 FPS 和帧耗时。Tracing 域下有专门的帧追踪插件，入口在 tracing 目录，Android 和 iOS 各有一份实现。Performance 域 Enable 之后，getAllTimingInfo 给你启动到首屏的耗时，getAllPerformanceEntries 给你 entries 列表。看到掉帧先别急着甩锅 JS，对比一下同场景双端的数据，确认是渲染线程慢还是主线程被占。

内存。指标是 JS 堆、UI 层和总内存。入口在 inspector_memory_agent.cc：Memory.startTracing 开始采样，复现一遍场景，再 stopTracing、getAllMemoryUsage 拿分段数据。曲线缓慢爬升不回落，基本可以锁定泄漏。

JS 执行。这块不用猜——devtool/js_debug/ 里 QuickJS、V8、Lepus 三个引擎各有一套 inspect proxy，断点、单步、调用栈走标准 Debugger/Runtime 域。脚本卡住时设个断点直接跳到出问题那一行，比翻日志快得多。

内存泄漏定位：从快照到栈回溯

Memory.startTracing，反复进出页面 20 次，stopTracing，对比首尾两次 getAllMemoryUsage 的差值；差值对应的内存块再用 HeapProfiler 域抓堆快照看分配栈，哪段代码没释放一眼就定位到了。全程不用重启应用，几十秒出结果。

进阶：跨平台差异与自动化集成

跨平台差异

帧追踪、内存追踪的平台实现在 tracing/platform/ 下分开维护，指标口径双端可能略有出入，对比时留意这一点；JS 引擎不同，Debugger 可用能力也不同，Lepus 引擎（Lynx 自家运行时）的代理逻辑单独一套。

自动化集成

集成测试脚本里已封装好 devtool 连接插件，跑回归时自动建立 CDP 会话，照着接就行；想加自定义指标，按 custom_cdp_docs 里各域的 yaml 定义扩展一份即可，protocol.json 是协议总表。

下一步

• 打开 protocol/custom_cdp_docs 里 Performance 和 Memory 两个域的 yaml，对照你的问题清单确认哪些指标已内置
• 给 getAllTimingInfo 的启动耗时加一条回归基线，超阈值直接告警进 CI
• 去 tracing 目录看 FPS 插件怎么算一帧耗时，再决定你的帧率红线定在多少

【免费下载链接】lynxEmpower the Web community and invite more to build across platforms.项目地址: https://gitcode.com/GitHub_Trending/lynx10/lynx