接入 Lynx DevTool

当你开发 Lynx 页面遇到问题时,可以使用 DevTool 进行调试。 但你需要先按照以下步骤接入 DevTool。

INFO

推荐在非生产环境下接入 DevTool,让生产环境的应用更轻量。

  • 包体积:DevTool 会增加包体积。
  • 运行时:相关模块在开启后懒加载,会增加内存开销,部分功能可能影响加载性能。

下文中的所有代码,你都可以在 integrating-lynx-demo-projects 项目 中找到

引入依赖

你需要新增以下两个组件:LynxServiceDevtool 子组件和 LynxDevTool

Podfile
target 'YourTarget' do
  pod 'LynxService', '3.4.1', :subspecs => [
      'Devtool',
  ]
  pod 'LynxDevtool', '3.4.1'
end

打开 DevTool

DevTool 提供了一些调试功能开关, 其中有三个比较重要的开关:

  • Lynx Debug 是 DevTool 的总开关,其控制 DevTool 的所有调试功能。
  • Lynx DevTool 控制 DevTool 的基础调试功能:元件审查和 JavaScript 调试。
  • Lynx LogBox 控制 LogBox 功能。
这三个开关均默认关闭,需要主动打开
  • 打开 Lynx Debug 后,Lynx DevToolLynx LogBox 开关才能够生效
  • 使用 DevTool 桌面应用调试 Lynx 页面时,需要打开 Lynx DevTool 开关
  • LogBox 可以帮助你快速发现问题

你可以在初始化 LynxEnv 时打开设置这三个开关:

Objective-C
Swift
AppDelegate.m
#import <Lynx/LynxEnv.h>
#import <Lynx/LynxService.h>
#import <Lynx/LynxServiceDevToolProtocol.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // ...
  LynxEnv *lynxEnv = [LynxEnv sharedInstance];
  // 打开 Lynx Debug 开关
  lynxEnv.lynxDebugEnabled = YES;
  // 打开 Lynx DevTool 开关
  lynxEnv.devtoolEnabled = YES;
  // 打开 Lynx LogBox 开关
  [LynxService(LynxServiceDevToolProtocol) setLogBoxPresetValue:YES];
  lynxEnv.logBoxEnabled = YES;
  return YES;
}
INFO

除了前面介绍的三个开关外,还有更多开关可以帮助你控制 DevTool 的行为,请参考 Lynx DevTool 开关页面

引入依赖

你需要接入这两个组件:lynx-service-devtoollynx-devtool

build.gradle
build.gradle.kts
// Lynx DevTool 接入时请保证和 Lynx 相同版本
dependencies {
  implementation "org.lynxsdk.lynx:lynx-devtool:3.4.1"
  implementation "org.lynxsdk.lynx:lynx-service-devtool:3.4.1"
}
INFO

推荐接入时使用最新 Lynx 版本

注册 DevTool Service

Java
Kotlin
YourApplication.java
private void initLynxService() {
  // ...
  // register DevTool service
  LynxServiceCenter.inst().registerService(LynxDevToolService.getINSTANCE());
}

打开 DevTool

DevTool 提供了一些调试功能开关, 其中有三个比较重要的开关:

  • Lynx Debug 是 DevTool 的总开关,其控制 DevTool 的所有调试功能。
  • Lynx DevTool 控制 DevTool 的基础调试功能:元件审查和 JavaScript 调试。
  • Lynx LogBox 控制 LogBox 功能。
这三个开关均默认关闭,需要主动打开
  • 打开 Lynx Debug 后,Lynx DevToolLynx LogBox 开关才能够生效
  • 使用 DevTool 桌面应用调试 Lynx 页面时,需要打开 Lynx DevTool 开关
    • 如果需要使用 JavaScript 调试功能,还需要打开 LoadJsBridge 开关
  • LogBox 可以帮助你快速发现问题

你可以在初始化 LynxEnv 时打开设置这三个开关:

Java
Kotlin
YourApplication.java
private void initLynxEnv() {
  LynxEnv.inst().init(this, null, null, null);
  // 打开 Lynx Debug 开关
  LynxEnv.inst().enableLynxDebug(true);
  // 打开 Lynx DevTool 开关
  LynxEnv.inst().enableDevtool(true);
  // 打开 Lynx LogBox 开关
  LynxDevToolService.getINSTANCE().setLogBoxPresetValue(true);
  LynxEnv.inst().enableLogBox(true);
  // 打开 LoadJsBridge 开关
  LynxDevToolService.getINSTANCE().setLoadJsBridge(true);
}
INFO

除了前面介绍的三个开关外,还有更多可以帮助你控制 DevTool 的行为,请参考 DevTool 开关页面

引入依赖

你需要接入这两个组件:@lynx/lynx_devtool@lynx/lynx_devtool_service

oh-package.json5
build-profile.json5
// Lynx DevTool 接入时请保证和 Lynx 相同版本
"dependencies": {
  "@lynx/lynx_devtool": "@param:dependencies.lynx_version",
  "@lynx/lynx_devtool_service": "@param:dependencies.lynx_version"
}
INFO

推荐接入时使用最新 Lynx 版本

注册 DevTool Service

ETS
YourEntryAbility.ets
// Initialize LynxDevToolService first, as LynxEnv initialization
// depends on LynxDevToolService from LynxService
LynxServiceCenter.registerService(
  LynxServiceType.DevTool,
  LynxDevToolService.instance,
);

打开 DevTool

DevTool 提供了一些调试功能开关, 其中有三个比较重要的开关:

  • Lynx Debug 是 DevTool 的总开关,其控制 DevTool 的所有调试功能。
  • Lynx DevTool 控制 DevTool 的基础调试功能:元件审查和 JavaScript 调试。
  • Lynx LogBox 控制 LogBox 功能。
Lynx Debug 与 Lynx LogBox 开关是默认开启的,Lynx DevTool 开关默认关闭,建议开启 Lynx DevTool 开关
  • 打开 Lynx Debug 后,Lynx DevToolLynx LogBox 开关才能够生效
  • 使用 DevTool 桌面应用调试 Lynx 页面时,需要打开 Lynx DevTool 开关
  • LogBox 可以帮助你快速发现问题

你可以在初始化 LynxEnv 时打开设置这三个开关:

ETS
YourEntryAbility.ets
public initLynxEnv() {
  LynxEnv.initialize(this.context);

  // 打开 Lynx Debug 开关
  LynxEnv.enableLynxDebug(true);
  // 打开 Lynx DevTool 开关
  LynxEnv.enableDevtool(true);
  // 打开 Lynx LogBox 开关
  LynxEnv.setLogBoxEnabled(true);
}
INFO

除了前面介绍的三个开关外,还有更多可以帮助你控制 DevTool 的行为,请参考 DevTool 开关页面

恭喜你!至此你已经完成了 DevTool 的接入。打开 Lynx DevTool 桌面应用, 使用 USB 线连接 app,即可开始调试。

Lynx DevTool 接入成功

兼容性

LCD tables only load in the browser

下一步

除非另有说明,本项目采用知识共享署名 4.0 国际许可协议进行许可,代码示例采用 Apache License 2.0 许可协议进行许可。