Just realized that safari on mobile can also support remote debugging like chrome + adb.
So one day I was having issue with quirky CSS bug that only occurs on Safari Mobile, so the first thing I do is turning on the iOS emulator.
If you want to turn on iOS emulator without turning on Xcode; You can run it using Terminal with the command below:
open /Applications/Xcode.app/Contents/Developer/Applications/iOS\ Simulator.app
You emulate any kind of iOS devices by toggling the device on Hardware menu.
Of course I turn on Mobile Safari and try to reproduce the quirky CSS bug on it. Well Yup… it’s reproducible on the Emulator (so we can safely assume that this is the same Mobile Safari on real devices) and the next logical step is to enable Developer options.
Go to Emulator `Settings` -> `Safari` -> `Advanced` and turn on the `Web Inspector` option
After that open Mobile Safari and point it to your web page.
Open Desktop Safari on your Mac. And make sure that you have a `Develop` menu shown on top
If you don’t have it – go to `Safari Preferences` -> `Advanced` and make sure the `Show Develop menu in menu bar` is checked
Go to `Develop` menu – and your Emulator should be listed. If it’s not – try to restart your Desktop Safari (and make sure you Mobile Safari is active and showing a web page)
Click on the appropriate page. And a developer tool will show up.