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 are 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 page inspection of browsers on your mobile device. If remote debugging is not enabled on your device, see How to enable Web Inspector in Safari and Chrome.

Connect your device

First, connect your mobile device to your computer:

1. Launch the WebDebugX 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. WebDebugX will automatically detect your device and display it in the device list

Tip: if you prefer to use WiFi for debugging, see the iOS WiFi debugging tutorial. If your device is not detected, install Keymob Assistant to fix the iOS drivers.

Select a debugging target

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

1. In the device list on the left side of WebDebugX, click your device
2. Click the refresh button next to it to fetch the page list. You will see the debuggable WebViews and browsers, along with the pages each one has open
3. Select the page or app you want to debug, and debugging begins

Debugging pages with WebDebugX

WebDebugX 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 will see the DOM structure of the page
3. Click an element to view its CSS styles
4. Use the Select element tool (the arrow icon at the top left) to pick elements directly on the page
5. You can modify CSS styles and HTML content in the Elements panel, and changes are applied immediately on the mobile device

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

Network analysis

Monitor network requests and responses:

1. Click the Network tab
2. You will see all network requests
3. Click a request to view details, including request headers, response headers and response content
4. Use filters to narrow down specific types of requests

Source code debugging

Debug JavaScript code. WebDebugX supports live debugging, meaning your actions in WebDebugX are immediately reflected on the page on the phone.

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

Next steps

Now that you know the basics, continue with the more advanced techniques: Network debugging · Performance analysis · WiFi debugging