iOS Safari debugging

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

Before you start

Before debugging iOS Safari, 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)
• Safari’s Web Inspector enabled on the iOS device

Tip: for iOS Safari debugging you must enable Web Inspector on the device. You will find the option under Settings > Safari > Advanced — 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 Safari tab

Once the device is connected, pick the Safari tab you want to debug:

1. In the WebDebugX device list, click your iOS device
2. On the device detail page you will see Safari 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 Safari tabs, make sure Safari is open on the device and at least one tab has a page loaded.

Debugging Safari content

Once a tab is selected, the following tools are available.

Inspect page elements

View and modify the HTML elements on the page:

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

Run and debug JavaScript in Safari:

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

Analyze the requests the page makes:

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

Set breakpoints and step through code:

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 iOS 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 (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

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

Performance analysis

Performance panel

Analyze page load and rendering performance:

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

Detect memory leaks and optimize memory usage:

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

Optimize requests and resource loading:

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 Web Inspector is enabled on the iOS device
• 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.

Safari tabs do not appear

• Make sure Safari is open on the iOS device
• Check that Web Inspector is enabled
• Try closing and reopening Safari
• 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