Lynx DevTool#

Lynx DevTool 是一套适用于 Lynx 应用的性能和调试工具。

体验 Lynx DevTool#

运行 Lynx Explorer#

请访问 Lynx Explorer，并按照文档说明运行 Lynx Explorer。

在 Lynx Explorer 上启用调试功能#

确保在 Lynx Explorer 的调试开关页面中启用了 Lynx Debug、Lynx DevTool 开关。

在开发设备上运行 Lynx DevTool 桌面应用#

打开 Lynx DevTool 桌面应用。

使用数据线连接调试设备#

使用数据线连接调试设备，此时 Lynx DevTool 桌面应用会自动识别到调试设备，并展示调试设备上的 Lynx 应用信息。

查看设备连接状态#

在工具栏中，可以查看当前连接的设备状态。

• USB 表示正在与设备通过 USB 有线连接。
• 时间表示与设备通信的延时。

选择调试设备#

在工具栏中，可以点击该按钮，在弹出的菜单中选择其他已连接的设备。

选择页面及调试选项#

在一个页面上，可能会有多个 Lynx 页面同时存在， 为了在不同的页面之间进行调试， 需要选择当前调试的页面。

在调试选项菜单底部，可以选择需要调试的页面。 鼠标移到页面路径上，在右侧将展示页面缩略图。

在调试选项菜单上，分别有 App Info 用于展示应用及 Lynx 信息， Settings 用于设置调试选项。

调试面板#

学习各个调试面板的使用。

Elements#

使用 Elements 面板可以检查和修改元件。

• 查看元件节点
• 更改元件节点
• 查看和更改 CSS
• 查找无效或已替换和其他 CSS

Console#

使用 Console 面板可以查看日志信息和运行 JavaScript。

• 查看日志
• 运行 JavaScript
• 清空日志

Sources#

使用 Sources 面板来调试 JavaScript。

• 文件导航
• 使用断点暂停代码
• 调试 JavaScript 代码
• 使用 SourceMap 调试原始代码
• 调试主线程 JavaScript 代码

Layers#

Layers 面板可帮助你了解 Lynx 页面的组成以及框架如何呈现内容，分析其 3D 图层，以发现渲染问题。

• 查看页面图层
• 检查页面图层

常见问题排查#

问：为什么 Lynx DevTool 桌面应用无法识别我的调试设备？

答：请确保已使用数据线连接开发设备（例如你的 MacBook）和运行 Lynx 应用的设备（例如你的手机）。

对于 iOS 设备，请确保开发设备上已安装与之版本匹配的 Xcode 及 iOS SDK；

对于 Android 设备，除了确保已使用数据线连接外，还需要在 Android 设备上启用开发者模式和 USB 调试功能：

1. 在 Android 设备上启用开发者模式，不同设备的具体步骤可能有所不同，请参考 Android 开发者文档
2. 在开发者选项中启用“USB 调试”
3. 当设备连接到电脑时，会弹出授权提示，请点击“允许”

可以尝试启动 Xcode 或 Android Studio 来编译运行一个应用，验证是否能够正常连接到设备。

提供反馈#

欢迎体验 Lynx DevTool，如果需要帮助请在 Lynx Issues 中提交问题。谢谢！