Hi! I discovered this feature this morning and wanted to share just in case anyone else was not aware. Troubleshooting design weirdness that is only showing up in iOS can be hard without the normal inspection tools we’re used to on desktop. There’s actually a way to utilize those same tools using your iOS device and Safari on a Mac! You’ll want to do this on a published version of your site.
This tutorial is written for Mac users. If you’re a Windows user fear not. There is an option for you through the application called Inspect. (still requires an iOS device) I will likely revisit this post with updated instructions on how to use this, but unfortunately was not able to get the app to function properly. If you try it, and it works, please let me know how it is!
- Go to your phone’s Settings app
- Scroll down to Safari
- Tap ‘Advanced’
- Turn on ‘Web Inspector’
- Open Safari on your Mac.
- Click ‘Preferences’, then ‘Advanced’
- Check ‘Show Develop menu in the menu bar’
Now, here’s the fun part.
- Open up the page you’d like to debug on your iOS device. I recommend publishing the site first, just to keep the inspected code a little cleaner.
- Plug your iOS device into your Mac. Make sure to tap ‘Trust’ on your phone screen if you’re asked to trust this computer.
- On your Mac, head to Safari and click the new Develop menu at the top.
- Select your iOS device in the menu, and select the tab you’d like to inspect.
Now, you’ll see that as you select code on the inspect window that’s opened, those elements will highlight in real time on your iOS device’s screen. In this example, I’m using the purple triangle image.
You can also click this icon 
on the top-left, and then tap elements on your phone’s screen to jump right to the corresponding code.
That’s it! I hope this helps you troubleshoot iOS specific issues on your websites! Please let me know if anyone has any questions or needs clarification on anything.