# Source: https://lynxjs.org/guide/start/integrate-lynx-devtool-advanced.md

# Advanced DevTool Configurations

## Integrate DevTool Switch Page

We provide a switch page that helps you quickly view or set DevTool. If you want, you can integrate it into your app as well.

<div id="debugging-devtool-switch" />

<PlatformTabs queryKey="platform">
  <PlatformTabs.Tab platform="ios">
    <img src="https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/lynx-website/assets/doc/debugging-devtool-switch-en-ios.png" alt="Lynx DevTool Switch Page" width={200} />

    > The switch setting page is written in Lynx, and the DevTool component has already packaged the page.

    Code example for integrating the devtool switch page:

    <Tabs groupId="switch-page-ios">
      <Tab label="Objective-C">
        ```objective-c
        #import <Lynx/LynxView.h>

        #import "DebugSettingViewController.h"
        #import "DemoLynxProvider.h"

        @implementation DebugSettingViewController

        - (void)viewDidLoad {
          [super viewDidLoad];

          LynxView *lynxView = [[LynxView alloc] initWithBuilderBlock:^(LynxViewBuilder *builder) {
            builder.config = [[LynxConfig alloc] initWithProvider:[[DemoLynxProvider alloc] init]];
            builder.screenSize = self.view.frame.size;
            builder.fontScale = 1.0;
          }];

          lynxView.preferredLayoutWidth = self.view.frame.size.width;
          lynxView.preferredLayoutHeight = self.view.frame.size.height;
          lynxView.layoutWidthMode = LynxViewSizeModeExact;
          lynxView.layoutHeightMode = LynxViewSizeModeExact;

          [self.view addSubview:lynxView];

          NSString *bundlePath = [[NSBundle mainBundle] pathForResource:@"LynxDebugResources" ofType: @"bundle"];
          NSData *templateData = [[NSData alloc] initWithContentsOfFile:[bundlePath stringByAppendingString:@"/switchPage/devtoolSwitch.lynx.bundle"]];
          [lynxView loadTemplate:templateData withURL:@"devtool_switch/switchPage/devtoolSwitch.lynx.bundle"];
        }

        @end
        ```
      </Tab>

      <Tab label="Swift">
        ```swift
        import UIKit

        class DebugSettingViewController: UIViewController {
          var url: String?

          override func viewDidLoad() {
            super.viewDidLoad()

            let lynxView = LynxView { builder in
              builder.config = LynxConfig(provider: DemoLynxProvider())
              builder.screenSize = self.view.frame.size
              builder.fontScale = 1.0
            }

            lynxView.preferredLayoutWidth = self.view.frame.size.width
            lynxView.preferredLayoutHeight = self.view.frame.size.height
            lynxView.layoutWidthMode = .exact
            lynxView.layoutHeightMode = .exact
            self.view.addSubview(lynxView)

            let bundlePath = Bundle.main.path(forResource: "LynxDebugResources", ofType: "bundle")
            let templateData = NSData(contentsOfFile: bundlePath!.appending("/switchPage/devtoolSwitch.lynx.bundle"))
            lynxView.loadTemplate(templateData! as Data, withURL: "devtool_switch/switchPage/devtoolSwitch.lynx.bundle")
          }
        }
        ```
      </Tab>
    </Tabs>
  </PlatformTabs.Tab>

  <PlatformTabs.Tab platform="android">
    <img src="https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/lynx-website/assets/doc/debugging-devtool-switch-en-android.png" alt="Lynx DevTool Switch Page" width={200} />

    > The switch setting page is written in Lynx, and the DevTool component has already packaged the page.

    Code example for integrating the devtool switch page:

    <Tabs groupId="switch-page-android">
      <Tab label="Java">
        ```java
        public class SwitchActivity extends AppCompatActivity {

            @Override
            protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                LynxView lynxView = buildLynxView();
                setContentView(lynxView);
                byte[] array = null;
                try {
                    InputStream inputStream = this.getAssets().open("devtool_switch/switchPage/devtoolSwitch.lynx.bundle");
                    array = readBytes(inputStream);
                    lynxView.renderTemplateWithBaseUrl(array, TemplateData.empty(), "devtool_switch/switchPage/devtoolSwitch.lynx.bundle");
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }

            private LynxView buildLynxView() {
                LynxViewBuilder viewBuilder = new LynxViewBuilder();
                viewBuilder.setTemplateProvider(new DemoTemplateProvider());
                return viewBuilder.build(this);
            }

            private byte[] readBytes(InputStream inputStream) throws IOException {
                byte[] buffer = new byte[1024];
                int bytesRead;
                ByteArrayOutputStream output = new ByteArrayOutputStream();
                while ((bytesRead = inputStream.read(buffer)) != -1) {
                    output.write(buffer, 0, bytesRead);
                }
                return output.toByteArray();
            }

        }

        ```
      </Tab>

      <Tab label="Kotlin">
        ```kotlin
        class SwitchActivity : Activity() {
            override fun onCreate(savedInstanceState: Bundle?) {
                super.onCreate(savedInstanceState)
                val lynxView = buildLynxView()
                setContentView(lynxView)
                try {
                    val array = this.assets.open("devtool_switch/switchPage/devtoolSwitch.lynx.bundle").readBytes()
                    lynxView.renderTemplateWithBaseUrl(
                        array,
                        TemplateData.empty(),
                        "devtool_switch/switchPage/devtoolSwitch.lynx.bundle"
                    )
                } catch (e: IOException) {
                    e.printStackTrace()
                }
            }

            private fun buildLynxView(): LynxView {
                val viewBuilder = LynxViewBuilder()
                viewBuilder.setTemplateProvider(DemoTemplateProvider())
                return viewBuilder.build(this)
            }
        }
        ```
      </Tab>
    </Tabs>
  </PlatformTabs.Tab>

  <PlatformTabs.Tab platform="harmony">
    <img src="https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/debugging-devtool-switch-en-harmony.png" alt="Lynx DevTool Switch Page" width={200} />

    > The switch setting page is written in Lynx, and the DevTool component has already packaged the page.

    Code example for integrating the devtool switch page:

    <Tabs groupId="switch-page-harmony">
      <Tab label="ETS">
        ```ts
        class Param {
          url: string;
          constructor(url: string) {
            this.url = url;
          }
        }
        @Entry
        @Component
        struct SwitchPage {
          // ... existing code ...
          build() {
            Column() {
              Text('Lynx').fontSize(18).width('100%').height('5%').textAlign(TextAlign.Center)
              LynxView({
                clients: this.clients,
                url: this.url,
                genericResourceFetcher: this.genericFetcher,
                mediaResourceFetcher: this.mediaFetcher,
                templateResourceFetcher: this.templateFetcher,
                modules: this.modules,
                sendableModules: this.sendableModules,
                metaData: this.metaData,
                onCreate: (context: LynxContext) => {
                  let param: Param = new Param(this.url);
                  context.sendGlobalEvent('viewAppear', [param]);
                  if (this.widthPixel > 0 && this.heightPixel > 0) {
                    context.updateScreenMetrics(this.widthPixel * this.viewDensity / TEST_DENSITY,
                      this.heightPixel * this.viewDensity / TEST_DENSITY);
                  }
                  context.setExtraTiming(this.extraTiming);
                }
              }).height(this.viewHeight).width(this.viewWidth)
            }.size({ width: '100%', height: '100%' }).alignItems(HorizontalAlign.Start)
          }
        }

        ```
      </Tab>
    </Tabs>
  </PlatformTabs.Tab>
</PlatformTabs>

You can also customize the page according to your needs, making the configuration of DevTool more diverse.

## Compatibility


**Error:** No compatibility data found for `devtool.integration.switch`