iOS Chrome debugging

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

Before you start

Before debugging iOS Chrome, make sure you have:

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

Tip: for iOS Chrome debugging, make sure Chrome is up to date and Web Inspector is turned on under Chrome’s Settings > Content Settings — see How to enable Web Inspector.

Connect the device

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

Select a Chrome tab

1. In the WebDebugX device list, click your iOS 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

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 (iPhone 13, iPad Pro, and so on)
3. You can also switch device orientation (portrait / landscape)
4. Adjust the zoom level to see the page at different sizes

Performance analysis

Performance panel

1. Click the Performance tab
2. Click Start recording
3. Interact with the page on the iOS 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 iOS 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 Chrome on the iOS device is updated to the latest version
• Check that the USB connection is working
• Try a different USB port or cable
• Restart WebDebugX and the iOS device

For a fuller checklist, see Device not found.

Chrome tabs do not appear

• Make sure Chrome is open on the iOS device
• 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