Enable Remote Debugging for Safari Mobile iOS (iPhone and iPad of course)

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

Screen Shot 2015-09-11 at 11.19.29 PM

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

Screen Shot 2015-09-11 at 11.25.44 PM

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

Screen Shot 2015-09-11 at 11.28.02 PM

If you don’t have it – go to `Safari Preferences` -> `Advanced` and make sure the `Show Develop menu in menu bar` is checked

Screen Shot 2015-09-11 at 11.29.05 PM

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)

Screen Shot 2015-09-11 at 11.30.33 PM

Click on the appropriate page. And a developer tool will show up.

Screen Shot 2015-09-11 at 11.33.41 PM

Happy debugging!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s