Integrating Lynx DevTool

When encountering issues during Lynx page development, you can use DevTool for debugging. However, you need to follow these steps to integrate DevTool first.

INFO

It is recommended to integrate DevTool in non-production environments to keep your production builds lightweight. All code examples in this documentation can be found in the integrating-lynx-demo-projects.

Adding Dependencies

You need to add two components: LynxDevTool and the Devtool subcomponent of LynxService.

Podfile
# Ensure Lynx DevTool version matches the Lynx version when integrating
target 'YourTarget' do
  pod 'LynxService', '3.2.0-rc.0', :subspecs => [
      'Devtool',
  ]
  pod 'LynxDevtool', '3.2.0-rc.0'
end

Enabling DevTool

DevTool provides several debugging switches. Here are three important switches:

  • Lynx Debug is the switch that controls all DevTool debugging.
  • Lynx DevTool controls main debugging features: element inspection and JavaScript debugging.
  • Lynx LogBox manages the LogBox.
These switches are disabled by default. It is recommended to enable all three switches
  • When debugging Lynx pages with the DevTool Desktop, both Lynx Debug and Lynx DevTool need be enabled
  • LogBox helps you quickly identify and diagnose issues

You can configure these switches during Lynx Environment Initialization:

Objective-C
Swift
AppDelegate.m
@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // ...
  // Enable Lynx Debug
  lynxEnv.lynxDebugEnabled = YES;
  // Enable Lynx DevTool
  lynxEnv.devtoolEnabled = YES;
  // Enable Lynx LogBox
  lynxEnv.logBoxEnabled = YES;
  return YES;
}
INFO

In addition to the three switches introduced earlier, there are more switches that can help you control the behavior of DevTool. Please refer to the Lynx DevTool Switch Page.

Adding Dependencies

You need to integrate these two components: lynx-service-devtool and lynx-devtool

build.gradle
build.gradle.kts
// Ensure Lynx DevTool version matches the Lynx version when integrating
dependencies {
  implementation "org.lynxsdk.lynx:lynx-devtool:3.2.0-rc.0"
  implementation "org.lynxsdk.lynx:lynx-service-devtool:3.2.0-rc.0"
}
INFO

It is recommended to use the latest Lynx version when integrating

Registering DevTool Service

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

Enabling DevTool

DevTool provides several debugging switches. Here are three important switches:

  • Lynx Debug is the switch that controls all DevTool debugging.
  • Lynx DevTool controls main debugging features: element inspection and JavaScript debugging.
  • Lynx LogBox manages the LogBox.
These switches are disabled by default. It is recommended to enable all three switches
  • When debugging Lynx pages with the DevTool Desktop, both Lynx Debug and Lynx DevTool switches need be enabled
  • LogBox helps you quickly identify and diagnose issues

You can configure these switches during Lynx Environment Initialization:

Java
Kotlin
YourApplication.java
private void initLynxEnv() {
  LynxEnv.inst().init(this, null, null, null);
  // Enable Lynx Debug
  LynxEnv.inst().enableLynxDebug(true);
  // Enable Lynx DevTool
  LynxEnv.inst().enableDevtool(true);
  // Enable Lynx LogBox
  LynxEnv.inst().enableLogBox(true);
}
INFO

In addition to the three switches introduced earlier, there are more that can help you control the behavior of DevTool. Please refer to the DevTool Switch Page.

Congratulations! You have completed the DevTool integration. Now, you may launch the Lynx DevTool Desktop and connect your app via USB to start debugging.

Integrate Lynx DevTool Successfully

Next Step

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.