Developer Tips: Debugging iOS Safari

 
Developer Tips: Debugging iOS Safari
 

While iOS is only one of the mobile platforms we test our responsive web design on, there is a cool feature for helping debug those little gremlins.

The following steps will allow you to use Safari's developer console to debug a site being viewed on your mobile device:

Step 1

Jump to the settings on your iOS device, and scroll down to Safari on the left hand side. At the bottom of the Safari options, you will find a click through called Advanced which you need to click through to. Turn on the 'Web Inspector' option.

Step 2

This one is the easy bit ;-) Find your lead and connect the device to your computer.

Step 3

Jump to Safari on your computer and if you haven't already, you need to turn developer tools on. To do this, open up Safari preferences, go to the Advanced tab, and click on 'Show developer menu' at the bottom.

Step 4

On your device, open up Safari and visit the page that you wish to debug.

Back on your computer, you should see the name of your device listed under the developer dropdown, and hovering over it will open a sub menu that shows the url of the page you are currently viewing. If it isn't there, check you are viewing Safari on your device. Clicking on the url in the dropdown will open up developer tools and allow you to debug to your hearts content.

Enjoy!

January
January