Android Chrome debugging

This tutorial guides you through debugging Chrome on an Android device with WebDebugX. You will learn how to connect an Android device, debug pages in Chrome, analyze performance problems, and work around the common debugging pitfalls.

Before you start

Before debugging Android Chrome, make sure you have:

• The latest version of WebDebugX installed
• The Android device you want to debug (phone or tablet) at hand
• Chrome installed on the Android device
• The device and computer on the same network (if you are using WiFi debugging)

Tip: for Android Chrome debugging you need USB debugging enabled on the device, under Settings > Developer options — see How to enable Web Inspector.

Connect the device

1. Connect the Android device to the computer with a USB cable
2. Allow USB debugging on the Android device (if prompted)
3. Launch WebDebugX
4. WebDebugX detects your Android device automatically

Select a Chrome tab

1. In the WebDebugX device list, click your Android device
2. On the device detail page you will see Chrome and the list of tabs it has open
3. Select the tab you want to debug
4. Click Start debugging

Tip: if you cannot see any Chrome tabs, make sure Chrome is open on the device and at least one tab has a page loaded.

Debugging Chrome content

Inspect page elements

1. In the debugging interface, click the Elements tab
2. You will see the full DOM tree of the page
3. Click an element to view its attributes and styles
4. Right-click an element to edit, delete or add elements
5. Use the Select element tool (the arrow icon at the top left) to pick elements directly on the page

Debug JavaScript

1. Click the Console tab
2. Execute JavaScript in the console
3. View JavaScript errors and logs
4. Use console.log(), console.error() and similar methods to output debugging information

Monitor network requests

1. Click the Network tab
2. You will see every network request
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
5. Enable Preserve log to keep request records across page navigations

Debug JavaScript sources

1. Click the Sources tab
2. Find 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, inspect variable values and step through the code
5. Use the Watch panel to track variable values

Device mode

WebDebugX offers a device mode that emulates different mobile devices:

1. In the debugging interface, click the Device mode icon (the phone icon) at the top right
2. Choose the device to emulate from the dropdown (Pixel 5, Galaxy S21, and so on)
3. You can also switch device orientation (portrait / landscape)
4. Adjust the zoom level to see the page at different sizes

Tip: device mode is useful for testing responsive design — you can check how your page looks on devices you do not physically own.

Performance analysis

Performance panel

1. Click the Performance tab
2. Click Start recording
3. Interact with the page on the Android device
4. Click Stop recording when you are done
5. Analyze the timeline — CPU usage, rendering events, and so on

Memory analysis

1. Click the Memory tab
2. Choose an analysis type (heap snapshot, allocation timeline, and so on)
3. Click Start recording
4. Interact with the page on the Android device
5. Click Stop recording when you are done
6. Analyze memory usage and look for possible leaks

Network performance

1. Enable Preserve log in the Network panel
2. Reload the page and review every request
3. Analyze load times and sizes
4. Look for resources you can optimize — compress images, combine CSS / JS files, and so on
5. Use network throttling to simulate different network conditions

Advanced techniques

Simulate different network conditions

1. In the Network panel, open the Throttling dropdown
2. Choose a preset (3G, 4G or Offline)
3. Or choose Custom and set upload / download speed and latency
4. Reload the page and observe the loading behaviour

Simulate geolocation

1. In the debugging interface, click More tools (the three dots)
2. Choose Sensors
3. Under Geolocation, pick a preset location or enter custom coordinates
4. Reload the page — it will use the simulated location

Simulate device orientation

1. In the debugging interface, click More tools (the three dots)
2. Choose Sensors
3. Under Device orientation, adjust the alpha, beta and gamma values
4. Or use a preset orientation (landscape left, landscape right, and so on)
5. The page responds to the simulated orientation change

Save and restore a debugging session

1. In the debugging interface, click File > Save session
2. Enter a session name and pick a location
3. Later, restore it via File > Open session
4. This is particularly useful for long debugging runs or team collaboration

Troubleshooting

The device does not appear in WebDebugX

• Make sure USB debugging is enabled on the Android device
• Check that the USB connection is working
• Try a different USB port or cable
• Restart WebDebugX and the Android device

For a fuller checklist, see Device not found.

Chrome tabs do not appear

• Make sure Chrome is open on the Android device
• Check that Chrome remote debugging is enabled
• Try closing and reopening Chrome
• Restart WebDebugX

The debugging interface is unresponsive

• Check that the network connection is stable
• Try reconnecting the device
• Close and reopen the debugging session
• If the problem persists, restart WebDebugX