#Integrating Lynx DevTool

#Adding Dependencies

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

# Ensure Lynx DevTool version matches the Lynx version when integrating
target 'YourTarget' do
  pod 'LynxService', '3.4.1', :subspecs => [
      'Devtool',
  ]
  pod 'LynxDevtool', '3.4.1'
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.

You can configure these switches during Lynx Environment Initialization:

#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];
  // Enable Lynx Debug
  lynxEnv.lynxDebugEnabled = YES;
  // Enable Lynx DevTool
  lynxEnv.devtoolEnabled = YES;
  // Enable Lynx LogBox
  [LynxService(LynxServiceDevToolProtocol) setLogBoxPresetValue:YES];
  lynxEnv.logBoxEnabled = YES;
  return YES;
}

#import <Lynx/LynxEnv.h>
#import <Lynx/LynxService.h>
#import <Lynx/LynxServiceDevToolProtocol.h>

class AppDelegate: UIResponder, UIApplicationDelegate {

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // ...
    let lynxEnv = LynxEnv.sharedInstance()
    // Enable Lynx Debug
    lynxEnv.lynxDebugEnabled = true
    // Enable Lynx DevTool
    lynxEnv.devtoolEnabled = true
    // Enable Lynx LogBox
    (LynxServices.getInstanceWith(LynxServiceDevToolProtocol.self, bizID: DEFAULT_LYNX_SERVICE) as? LynxServiceDevToolProtocol)?.logBoxPresetValue = true
    lynxEnv.logBoxEnabled = true
    return true
  }
}

#Adding Dependencies

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

// Ensure Lynx DevTool version matches the Lynx version when integrating
dependencies {
  implementation "org.lynxsdk.lynx:lynx-devtool:3.4.1"
  implementation "org.lynxsdk.lynx:lynx-service-devtool:3.4.1"
}

// Ensure Lynx DevTool version matches the Lynx version when integrating
dependencies {
  implementation ("org.lynxsdk.lynx:lynx-devtool:3.4.1")
  implementation ("org.lynxsdk.lynx:lynx-service-devtool:3.4.1")
}

#Registering DevTool Service

DevTool Service provides some preset values to control default behaviors. You can configure them as needed.

In the next chapter, we will introduce these preset values in detail.

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);
}

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)
}

#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.

You can configure these switches during Lynx Environment Initialization:

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);
}

private fun 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)
}

#Adding Dependencies

You need to integrate these two components: @lynx/lynx_devtool and @lynx/lynx_devtool_service.

// Ensure Lynx DevTool version matches the Lynx version when integrating
"dependencies": {
  "@lynx/lynx_devtool": "@param:dependencies.lynx_version",
  "@lynx/lynx_devtool_service": "@param:dependencies.lynx_version"
}

// Since @lynx/lynx_devtool is dynamically imported via a variable,
// to include the devtool module in the build,
// you also need to add a runtimeOnly buildOption in buildOption within build-profile.json5.
"buildOption": {
    "arkOptions": {
      "runtimeOnly": {
        "packages": [
          "@lynx/lynx_devtool"
        ]
      }
    },
}

#Registering DevTool Service

// Initialize LynxDevToolService first, as LynxEnv initialization
// depends on LynxDevToolService from LynxService
LynxServiceCenter.registerService(
  LynxServiceType.DevTool,
  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.

You can configure these switches during Lynx Environment Initialization:

public initLynxEnv() {
  LynxEnv.initialize(this.context);

  // Enable Lynx Debug
  LynxEnv.enableLynxDebug(true);
  // Enable Lynx DevTool
  LynxEnv.enableDevtool(true);
  // Enable Lynx LogBox
  LynxEnv.setLogBoxEnabled(true);
}