|
| 1 | +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html |
| 2 | + |
| 3 | +exports[`Markdown > remark-complex 1`] = ` |
| 4 | +"*** |
| 5 | +
|
| 6 | +## sidebar: false |
| 7 | +
|
| 8 | +
|
| 9 | +
|
| 10 | +# Integrating Lynx DevTool |
| 11 | +
|
| 12 | +When encountering issues during Lynx page development, you can use [DevTool](guide/debugging/lynx-devtool.mdx) for debugging. |
| 13 | +However, you need to follow these steps to integrate DevTool first. |
| 14 | +
|
| 15 | +:::info |
| 16 | +
|
| 17 | +It is recommended to integrate DevTool in non-production environments to keep your production builds lightweight. |
| 18 | +All code examples in this documentation can be found in the [integrating-lynx-demo-projects](https://github.com/lynx-family/integrating-lynx-demo-projects/tree/release/3.1). |
| 19 | +
|
| 20 | +::: |
| 21 | +
|
| 22 | +### Adding Dependencies |
| 23 | +
|
| 24 | +You need to add two components: \`LynxDevTool\` and the \`Devtool\` sub component of \`LynxService\`. |
| 25 | +
|
| 26 | +\`\`\`ruby title="PodFile" {8,11} |
| 27 | +# Ensure Lynx DevTool version matches the Lynx version when integrating |
| 28 | +target 'YourTarget' do |
| 29 | + pod 'LynxService', '3.2.0-rc.0', :sub specs => [ |
| 30 | + 'Devtool', |
| 31 | + ] |
| 32 | + pod 'LynxDevtool', '3.2.0-rc.0' |
| 33 | +end |
| 34 | +\`\`\` |
| 35 | +
|
| 36 | +### Enabling DevTool |
| 37 | +
|
| 38 | +DevTool provides several debugging switches. |
| 39 | +Here are three important switches: |
| 40 | +
|
| 41 | +* \`Lynx Debug\` is the switch that controls all DevTool debugging. |
| 42 | +* \`Lynx DevTool\` controls main debugging features: element inspection and JavaScript debugging. |
| 43 | +* \`Lynx LogBox\` manages the [LogBox](guide/debugging/handle-errors.html). |
| 44 | +
|
| 45 | +- When debugging Lynx pages with the DevTool Desktop, both \`Lynx Debug\` and |
| 46 | + \`Lynx DevTool\` need be enabled |
| 47 | +- LogBox helps you quickly identify and diagnose issues |
| 48 | +
|
| 49 | +You can configure these switches during [Lynx Environment Initialization](guide/start/integrate-with-existing-apps.html): |
| 50 | +
|
| 51 | +\`\`\`objective-c title=AppDelegate.m {5-10} |
| 52 | +@implementation AppDelegate |
| 53 | +
|
| 54 | +- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { |
| 55 | + // ... |
| 56 | + // Enable Lynx Debug |
| 57 | + lynxEnv.lynxDebugEnabled = YES; |
| 58 | + // Enable Lynx DevTool |
| 59 | + lynxEnv.devtoolEnabled = YES; |
| 60 | + // Enable Lynx LogBox |
| 61 | + lynxEnv.logBoxEnabled = YES; |
| 62 | + return YES; |
| 63 | +} |
| 64 | +\`\`\` |
| 65 | +
|
| 66 | +\`\`\`swift title=AppDelegate.swift {5-10} |
| 67 | +class AppDelegate: UIResponder, UIApplicationDelegate { |
| 68 | +
|
| 69 | + func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { |
| 70 | + // ... |
| 71 | + // Enable Lynx Debug |
| 72 | + lynxEnv.lynxDebugEnabled = true |
| 73 | + // Enable Lynx DevTool |
| 74 | + lynxEnv.devtoolEnabled = true |
| 75 | + // Enable Lynx LogBox |
| 76 | + lynxEnv.logBoxEnabled = true |
| 77 | + return true |
| 78 | + } |
| 79 | +} |
| 80 | +\`\`\` |
| 81 | +
|
| 82 | +:::info |
| 83 | +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](/guide/start/integrate-lynx-devtool-advanced.html#debugging-devtool-switch). |
| 84 | +::: |
| 85 | +
|
| 86 | +### Adding Dependencies |
| 87 | +
|
| 88 | +You need to integrate these two components: \`lynx-service-devtool\` and \`lynx-devtool\` |
| 89 | +
|
| 90 | +\`\`\`groovy |
| 91 | +// Ensure Lynx DevTool version matches the Lynx version when integrating |
| 92 | +dependencies { |
| 93 | + implementation "org.lynx.lynx:lynx-devtool:3.2.0-rc.0" |
| 94 | + implementation "org.lynx.lynx:lynx-service-devtool:3.2.0-rc.0" |
| 95 | +} |
| 96 | +\`\`\` |
| 97 | +
|
| 98 | +\`\`\`kotlin |
| 99 | +// Ensure Lynx DevTool version matches the Lynx version when integrating |
| 100 | +dependencies { |
| 101 | + implementation ("org.lynx.lynx:lynx-devtool:3.2.0-rc.0") |
| 102 | + implementation ("org.lynx.lynx:lynx-service-devtool:3.2.0-rc.0") |
| 103 | +} |
| 104 | +\`\`\` |
| 105 | +
|
| 106 | +:::info |
| 107 | +It is recommended to use the latest [Lynx version](https://github.com/lynx-family/lynx/releases) when integrating |
| 108 | +::: |
| 109 | +
|
| 110 | +### Registering DevTool Service |
| 111 | +
|
| 112 | +\`\`\`java title=YourApplication.java {3-4} |
| 113 | +private void initLynxService() { |
| 114 | + // ... |
| 115 | + // register DevTool service |
| 116 | + LynxServiceCenter.inst().registerService(LynxDevToolService.INSTANCE); |
| 117 | +} |
| 118 | +
|
| 119 | +\`\`\` |
| 120 | +
|
| 121 | +\`\`\`kotlin title=YourApplication.kt {3-4} |
| 122 | +private fun initLynxService() { |
| 123 | + // ... |
| 124 | + // register DevTool service |
| 125 | + LynxServiceCenter.inst().registerService(LynxDevToolService) |
| 126 | +} |
| 127 | +\`\`\` |
| 128 | +
|
| 129 | +### Enabling DevTool |
| 130 | +
|
| 131 | +DevTool provides several debugging switches. |
| 132 | +Here are three important switches: |
| 133 | +
|
| 134 | +* \`Lynx Debug\` is the switch that controls all DevTool debugging. |
| 135 | +* \`Lynx DevTool\` controls main debugging features: element inspection and JavaScript debugging. |
| 136 | +* \`Lynx LogBox\` manages the [LogBox](guide/debugging/handle-errors.html). |
| 137 | +
|
| 138 | +- When debugging Lynx pages with the DevTool Desktop, both \`Lynx Debug\` and |
| 139 | + \`Lynx DevTool\` switches need be enabled |
| 140 | +- LogBox helps you quickly identify and diagnose issues |
| 141 | +
|
| 142 | +You can configure these switches during [Lynx Environment Initialization](guide/start/integrate-with-existing-apps.html): |
| 143 | +
|
| 144 | +\`\`\`java title=YourApplication.java {3-8} |
| 145 | +private void initLynxEnv() { |
| 146 | + LynxEnv.inst().init(this, null, null, null); |
| 147 | + // Enable Lynx Debug |
| 148 | + LynxEnv.inst().enableLynxDebug(true); |
| 149 | + // Enable Lynx DevTool |
| 150 | + LynxEnv.inst().enableDevtool(true); |
| 151 | + // Enable Lynx LogBox |
| 152 | + LynxEnv.inst().enableLogBox(true); |
| 153 | +} |
| 154 | +
|
| 155 | +\`\`\` |
| 156 | +
|
| 157 | +\`\`\`kotlin title=YourApplication.kt {3-8} |
| 158 | +private fun initLynxEnv() { |
| 159 | + LynxEnv.inst().init(this, null, null, null) |
| 160 | + // Enable Lynx Debug |
| 161 | + LynxEnv.inst().enableLynxDebug(true) |
| 162 | + // Enable Lynx DevTool |
| 163 | + LynxEnv.inst().enableDevtool(true) |
| 164 | + // Enable Lynx LogBox |
| 165 | + LynxEnv.inst().enableLogBox(true) |
| 166 | +} |
| 167 | +\`\`\` |
| 168 | +
|
| 169 | +:::info |
| 170 | +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](/guide/start/integrate-lynx-devtool-advanced.html#debugging-devtool-switch). |
| 171 | +::: |
| 172 | +
|
| 173 | +Congratulations! You have completed the DevTool integration. Now, you may launch the Lynx DevTool Desktop and |
| 174 | +connect your app via USB to start debugging. |
| 175 | +
|
| 176 | +## Next Step |
| 177 | +" |
| 178 | +`; |
| 179 | +
|
| 180 | +exports[`Markdown > remark-simple 1`] = ` |
| 181 | +" |
| 182 | +
|
| 183 | +# h1 |
| 184 | +
|
| 185 | +## h2 Tab |
| 186 | +
|
| 187 | +some content |
| 188 | +
|
| 189 | +\`\`\`js |
| 190 | +const tab1 = tab; |
| 191 | +\`\`\` |
| 192 | +
|
| 193 | +\`\`\`js |
| 194 | +const tab2 = tab; |
| 195 | +\`\`\` |
| 196 | +
|
| 197 | +\`\`\`js |
| 198 | +const tab3 = tab; |
| 199 | +\`\`\` |
| 200 | +
|
| 201 | +## h2 div |
| 202 | +
|
| 203 | +outer |
| 204 | +inner |
| 205 | +
|
| 206 | +## h2 nested Tab |
| 207 | +
|
| 208 | +\`\`\`js |
| 209 | +const tab1 = tab; |
| 210 | +\`\`\` |
| 211 | +
|
| 212 | +\`\`\`js |
| 213 | +const tab2 = tab; |
| 214 | +\`\`\` |
| 215 | +
|
| 216 | +second Tab |
| 217 | +" |
| 218 | +`; |
0 commit comments