Debugging HTML in iOS webview

Question

Android can use desktop Chrome's web inspector to debug HTML/CSS issues embedded in an App's WebView, as long as you connect them through USB.

I've been searching all over google and this site and cannot find any information regarding this. Is there a similar way to inspect HTML/CSS elements/rules in iOS?

Because there are some issues that only affects webview, so viewing it from iOS Safari cannot reproduce some issues.

Outweigh

Answer 1

You can do this using Safari on Mac. First, go to settings on iPhone → Safari → Advanced. Then enable the "Web Inspector" option and follow the instructions to enable on Mac.

Edit: this will only work with apps installed using Xcode.

Euryale

But this only applies to website opened in iOS safari, right? I'm talking about websites that are inside another App, embedded in webview. – Outweigh

No, I'm talking about webview inside an iPhone app. Just try it. Run your app in the device. See to it that webvirw is visible. Now open safari on mac and do as described in the screenshot. – Euryale

Does the app developer have to write something in the App first to enable this or is this on by default on all Apps? – Outweigh

It's enabled by default. – Euryale

Take a look at this link for further info - appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari – Euryale

I did try it, actually. So strange that when I open a webpage in Safari, I do get the option to view it in inspector. But when I open our App that has a webview, the inspect options aren't showing. – Outweigh

Let us continue this discussion in chat. – Euryale

works like a charm. how unexpected! i ran it in the simulator. thank you! – Shropshire

@SonuVR This doesn't work for the webview in the LinkedIn app, unfortunately... Any idea? EDIT: I found out this only works for apps installed using Xcode. "You can only debug webviews in applications loaded onto your device through Xcode. You can't debug webviews in apps installed through the App Store or Apple Configurator." – Fife

Anyway to do this with Linux? I don’t have a mac – Citronellal

Answer 2

As of iOS 16.4+ you will need to edit your WKWebView properties too.

1. Follow the steps others describe to enable debugging on your phone
2. Set webView.isInspectable = true
3. Enjoy

1: Debugging on the phone

• Go to Settings > Safari > Advanced (at the bottom)
• Enable: "Web Inspector"

2: Set the properties of the WKWebView

Assuming you're hitting targets earlier than 16.4, wrap in a test...

if #available(iOS 16.4, *) {
  webView.isInspectable = true
}

Calumnious