Sometimes it's absolutely horrendous to debug a css/js issue just on iPhone. It's not reproducable on desktop, in responsive view, even not in simulators. But in actual device it'll just wink at you!

Today while playing with Safari Settings on iPhone, I discovered a gem! Probably it was there for long time, but I didn't know. Yes, You can actually inspect Websites on iOS Safari! Yayyyy! 😍

Here's how to do it in step by step:

First you need to setup it on your iPhone/iPad. Go to Settings > Safari > Advanced > Web Inspector, Enable it.

Enable iSO Safari Web Inspector

Okay, now on your Mac, Open Safari. You probably already have Develop menu enabled here. If not enabled from Safari > Preferences > Advanced > Show Develop Menu in Menubar, Enable it.

Enable Develop Menu on Mac Safari

Now connect your iPhone/iPad on your Mac with cable. Open up the website you want to inspect on your iOS Safari. Back to your Mac Safari, In the Develop Menu, Find your iPhone/iPad name. Hover over it, You should see the websites you've opened on your mobile device.

Websites opne on my iPhone

Click on the desired one, it should opne the full blown inspector on your Mac.

Full Blown Web Inspector for Mobile Safari

Now enjoy bit easier development for iOS. Hope this helps. If you use any other tacticts to inspecting/debugging website on mobile devices, please let us know via comments below.

Note: Safari should be the foremost application on your iOS device to access the list of website.




What's on your mind?