#Integrating Lynx DevTool

#Adding Dependencies

You need to add these components: the Devtool subcomponent of LynxService, LynxDevTool, and DebugRouter.

# Ensure Lynx DevTool version matches the Lynx version when integrating
target 'YourTarget' do
  pod 'LynxService', '4.0.0', :subspecs => [
      'Devtool',
  ]
  pod 'LynxDevtool', '4.0.0'

  pod 'DebugRouter', '5.0.15'
  pod 'DebugRouter/MessageTransceiverEnable', '5.0.15'
end

#Enabling DevTool

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

• 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 all sessions debugging for DevTool (required for Lynx DevTool Desktop connection)
  [LynxService(LynxServiceDevToolProtocol) enableAllSessions];
  // Enable Lynx DevTool Switch
  lynxEnv.devtoolEnabled = YES;
  // Enable Lynx LogBox Switch
  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 all sessions debugging for DevTool (required for Lynx DevTool Desktop connection)
    (LynxServices.getInstanceWith(LynxServiceDevToolProtocol.self) as? LynxServiceDevToolProtocol)?.enableAllSessions()
    // Enable Lynx DevTool Switch
    lynxEnv.devtoolEnabled = true
    // Enable Lynx LogBox Switch
    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:4.0.0"
  implementation "org.lynxsdk.lynx:lynx-service-devtool:4.0.0"
}

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

#Registering DevTool Service

private void initLynxService() {
  // ...
  // register DevTool service
  LynxServiceCenter.inst().registerService(LynxDevToolService.getINSTANCE());

  // enable all sessions debug for DevTool (required for Lynx DevTool Desktop connection)
  LynxDevToolService.getINSTANCE().enableAllSessions();
}

private fun initLynxService() {
  // ...
  // register DevTool service
  LynxServiceCenter.inst().registerService(LynxDevToolService.INSTANCE)

  // enable all sessions debug for DevTool (required for Lynx DevTool Desktop connection)
  LynxDevToolService.INSTANCE.enableAllSessions()
}

#Enabling DevTool

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

• 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);
  // Advance DevTool to ENABLED state
  LynxEnv.inst().enableLynxDebug(true);
  // Enable Lynx DevTool Switch
  LynxEnv.inst().enableDevtool(true);
  // Enable Lynx LogBox Switch
  LynxEnv.inst().enableLogBox(true);
}

private fun initLynxEnv() {
  LynxEnv.inst().init(this, null, null, null)
  // Advance DevTool to ENABLED state
  LynxEnv.inst().enableLynxDebug(true)
  // Enable Lynx DevTool Switch
  LynxEnv.inst().enableDevtool(true)
  // Enable Lynx LogBox Switch
  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 some important switches:

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

  // Advance DevTool to ENABLED state
  LynxEnv.enableLynxDebug(true);
  // Enable Lynx DevTool Switch
  LynxEnv.enableDevtool(true);
  // Enable Lynx LogBox Switch
  LynxEnv.setLogBoxEnabled(true);
}