Debugging web sites remotely on iOS device

Problem

Is it possible to debug HMTL applications and/or websites while running on an iPhone or iPad? I design, build and test web sites on my iMac. Noticed that pages are rendered differently on iOS hardware and in the simulated Safari/iOS user agent under macOS.

Solution

Yes, we’ve been able to remotely debug web pages on iOS devices for a while. iOS 10 and macOS Sierra Steps:

1. On the iOS device go to Settings -> Safari. Enable Web Inspector.

2. Enable Javascript to be able to run and debug JS code on the pages.

Enable Safari developer mode in iOS settings

3. If not set, open Safari on your Mac. Find Preferences -> Advanced. Enable Show Develop menu in menu bar option.

Enable developer mode in Safari

4. Connect iPhone/iPad to your computer with a USB cable.

5. On the Mac open the Safari -> Develop menu. You must find the name of your device there. Select it. Click on the web page name you want to debug from the child menu. Web Inspector will pop up.

Enable developer mode in Safari

6. You can now test and debug CSS, Javascript… and network load behaviors of your web page.