Inspecting websites and web views on iOS devices · Eric Eggert

Created on November 12, 2023 at 11:44 am

While it is often sufficient to test the mobile view of websites and applications on the desktop, with desktop browsers, it’s sometimes not enough: Some websites use device sniffing to hash out which device is used and deliver different code to users. In other instances, the web view is part of an application.

Being able to inspect and look at the code in these views is essential to give good feedback to developers implementing these views.

Inspect Browser (websites only)

The Inspect ORG Browser app on iPhone ORG and iPad ORG

For casual use and availability on the go (without tethering to a Mac), Inspect Browser ORG does the job. It works great on iOS and iPadOS and provides all web inspection needs: Logging on the console, inspecting elements, finding out accessible names, and much more.

I personally use it only to quickly get to the bottom of an HTML structure or figuring out why something is announced/shown weirdly while using VoiceOver or Voice Control. It is a separate browser, so you have to log in and/or navigate to where the issue is.

Safari PERSON on macOS (websites and web views)

Picking a website on the iPhone ORG

For websites and web views where the small-screen inspector in Inspect Browser ORG does not cut it, you can use Safari ORG on macOS to connect to the iPhone/iPad. You need to set up your device once:

On your Mac: Switch on Developer mode in Safari GPE by going to Preferences → Advanced and check the “Show features for web developers” checkbox. On your iPhone ORG or iPad ORG : Go to Settings → Safari → Advanced and switch on “Web Inspector”.

When you attach your iPhone ORG or iPad ORG to the Mac ORG using a Lightning or USB-C cable, open Safari ORG and go to the Develop ORG menu. Select the device and then the website and a inspector window opens. It has the full capabilities of the desktop Safari ORG inspector, which is very capable.

From my experience, everything that is in a normal web view can be easily inspected, even in non-iOS-Safari apps. More custom implementation sometimes suppress the ability to inspect them. I can easily inspect web views in Mona (App Store Link ORG ), my favorite Mastodon PERSON client, but have no chance in the LinkedIn ORG app.

Check “ Connect via Network ORG ” to get rid of the need of a cable connection.

The inspector live inspecting content on my iPhone

You can even use the crosshair button and select elements on the iPhone ORG /iPad by touch.

Connecting to blog.lzomedia.com... Connected... Page load complete