#接入 Lynx DevTool
当你开发 Lynx 页面遇到问题时，可以使用 DevTool 进行调试。 但你需要先按照以下步骤接入 DevTool。
Info
推荐在非生产环境下接入 DevTool，让生产环境的应用更轻量。
- 包体积：DevTool 会增加包体积。
- 运行时：相关模块在开启后懒加载，会增加内存开销，部分功能可能影响加载性能。
下文中的所有代码，你都可以在 integrating-lynx-demo-projects 项目 中找到
#引入依赖
你需要新增以下两个组件：LynxService 的 Devtool 子组件和 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 DevTool和Lynx 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;
}YourTarget-Bridging-Header.h
#import <Lynx/LynxEnv.h>
#import <Lynx/LynxService.h>
#import <Lynx/LynxServiceDevToolProtocol.h>AppDelegate.swift
class AppDelegate: UIResponder, UIApplicationDelegate {
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// ...
let lynxEnv = LynxEnv.sharedInstance()
// 打开 Lynx Debug 开关
lynxEnv.lynxDebugEnabled = true
// 打开 Lynx DevTool 开关
lynxEnv.devtoolEnabled = true
// 打开 Lynx LogBox 开关
(LynxServices.getInstanceWith(LynxServiceDevToolProtocol.self, bizID: DEFAULT_LYNX_SERVICE) as? LynxServiceDevToolProtocol)?.logBoxPresetValue = true
lynxEnv.logBoxEnabled = true
return true
}
}Info
除了前面介绍的三个开关外，还有更多开关可以帮助你控制 DevTool 的行为，请参考 Lynx DevTool 开关页面。
#引入依赖
你需要接入这两个组件：lynx-service-devtool 和 lynx-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"
}// 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
DevTool Service 提供了一些预设值，以控制默认是否接入不同的调试功能，可以根据实际需求进行配置。
在下一章节中，将详细介绍它们的作用和使用场景。
Java
Kotlin
YourApplication.java
private void initLynxService() {
// ...
// register DevTool service
LynxServiceCenter.inst().registerService(LynxDevToolService.getINSTANCE());
// set DevTool preset values
LynxDevToolService.getINSTANCE().setLynxDebugPresetValue(true);
LynxDevToolService.getINSTANCE().setLogBoxPresetValue(true);
LynxDevToolService.getINSTANCE().setLoadQJSBridge(true);
LynxDevToolService.getINSTANCE().setLoadV8Bridge(true);
}
YourApplication.kt
private fun initLynxService() {
// ...
// register DevTool service
LynxServiceCenter.inst().registerService(LynxDevToolService.INSTANCE)
// set DevTool preset values
LynxDevToolService.INSTANCE.setLynxDebugPresetValue(true)
LynxDevToolService.INSTANCE.setLogBoxPresetValue(true)
LynxDevToolService.INSTANCE.setLoadQJSBridge(true)
LynxDevToolService.INSTANCE.setLoadV8Bridge(true)
}#打开 DevTool
DevTool 提供了一些调试功能开关， 其中有三个比较重要的开关：
Lynx Debug是 DevTool 的总开关，其控制 DevTool 的所有调试功能。Lynx DevTool控制 DevTool 的基础调试功能：元件审查和 JavaScript 调试。Lynx LogBox控制 LogBox 功能。
这三个开关均默认关闭，需要主动打开
- 打开
Lynx Debug后，Lynx DevTool和Lynx LogBox开关才能够生效 - 使用 DevTool 桌面应用调试 Lynx 页面时，需要打开
Lynx DevTool开关- 如果需要使用 JavaScript 调试功能，还需要设置
LoadQJSBridge或LoadV8Bridge预设值为trueLoadQJSBridge控制加载 PrimJS 引擎调试库LoadV8Bridge控制加载 V8 引擎调试库
- 如果需要使用 JavaScript 调试功能，还需要设置
- 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 开关
LynxEnv.inst().enableLogBox(true);
}
YourApplication.kt
private fun initLynxEnv() {
LynxEnv.inst().init(this, null, null, null)
// 打开 Lynx Debug 开关
LynxEnv.inst().enableLynxDebug(true)
// 打开 Lynx DevTool 开关
LynxEnv.inst().enableDevtool(true)
// 打开 Lynx LogBox 开关
LynxEnv.inst().enableLogBox(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"
}// 由于 `@lynx/lynx_devtool` 是通过变量动态 import，为了将 devtool 模块加入编译，
// 还需要额外在 build-profile.json5 中的 buildOption 额外增加一个 runtimeOnly 的 buildOption 配置。
"buildOption": {
"arkOptions": {
"runtimeOnly": {
"packages": [
"@lynx/lynx_devtool"
]
}
},
}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 DevTool和Lynx 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，即可开始调试。
#兼容性
LCD tables only load in the browser