Here’s the translated Markdown content in English while maintaining the original format:

Quick Start

This tutorial will help you master the basic features of WebDebugX in just 5 minutes, enabling you to start debugging web applications on mobile devices. Whether you’re debugging iOS Safari, Android Chrome, or WebView apps, this tutorial will get you up and running quickly.

Enable Web Inspector on Mobile Devices

To debug browsers on mobile devices like Android and iOS, you need to enable the web inspector feature to allow debugging and webpage inspection of browsers on your mobile device. If remote debugging isn’t enabled on your device, please refer to How to Enable Web Inspector for Safari and Chrome.

Connect Your Device

First, you need to connect your mobile device to your computer:

  1. Launch the Web Debug X application
  2. Connect your mobile device to your computer using a USB cable
  3. Allow USB debugging on your mobile device (if prompted). For iOS, if prompted to “Trust This Computer,” tap “Trust”
  4. Web Debug X will automatically detect your device and display it in the device list

Tip: If you prefer to use Wi-Fi for debugging, refer to the Wi-Fi Debugging for Mobile Pages tutorial for more information. If your device isn’t detected, install Keymob Assistant to fix iOS drivers.

Select a Debugging Target

After connecting your device, you need to select the webpage or app you want to debug:

  1. In the device list on the left side of Web Debug X, click on your device
  2. Then click the refresh button next to it to fetch the page list. You’ll see a list of debuggable WebViews and browsers, along with the available pages
  3. Select the webpage or app you want to debug, and debugging will begin
    image

Debugging Web Pages with Web Debug X

Web Debug X provides a debugging interface similar to Chrome DevTools, including the following key features:

Element Inspection

Inspect the structure and styles of page elements:

  1. In the debugging interface, click the “Elements” tab at the top left
  2. You’ll see the DOM structure of the page
  3. Click on an element to view its CSS styles
  4. Use the “Select Element” tool (the arrow icon at the top left) to directly select elements on the page
  5. You can modify CSS styles and HTML content in the Elements panel, and changes will be applied immediately on the mobile device
    image

Console Debugging

Use the JavaScript console for debugging:

  1. Click the “Console” tab
  2. You can view JavaScript errors and logs
  3. Enter and execute JavaScript code in the console
  4. Use methods like console.log(), console.error(), and alert() to output debugging information
    image

Network Analysis

Monitor network requests and responses:

  1. Click the “Network” tab
  2. You’ll see all network requests
  3. Click on a request to view detailed information, including request headers, response headers, and response content
  4. Use filters to narrow down specific types of requests
    image

Source Code Debugging

Debug JavaScript code in real time. Web Debug X supports live debugging, meaning your actions in Web Debug X will immediately reflect on the mobile page.

  1. Click the “Sources” tab
  2. Locate the JavaScript file you want to debug in the file tree
  3. Click the line number to add a breakpoint
  4. When the code execution reaches the breakpoint, you can inspect variable values and step through the code

image