Using Safari development tools on your iPhone

 
 
 

There's been a bit buzz around in the web development world for the last couple of years which you can't possibly have missed, responsive design is everywhere and it looks like it here to stay. The fact is when I design and build site nowadays responsive design for mobile devices is one of the main priorities.

The great thing about building responsive sites is that you can easily do the build in your normal development tools, Editor and browser. Normally resizing the browser will replicate the width on a mobile or tablet device and you can always open the built in browser development tools to debug and find out whats going on if you have problems.

But what if you need to debug in the device? What if you need to know whats happening with some the touch gestures you've added? It not as easy to do this on a desktop browser (although Chrome does allow you to replicate touch gestures with your mouse) Luckily Apple have done a great job of adding safari development tools to your iPhone when tethered. Here's low down:

Getting it setup

Firstly you need to enable the development tools on your desktop Safari, on a Mac you just need to go to 'preferences', click on the 'advanced' tab and tick the tick box labelled 'Show Develop menu in menu bar'. This will add a new menu item to the top bar called Develop which will add the extra development tools you will need. This is also really handy for debugging in the desktop browser and comes with tools to changes the user agent (I.e pretend to be Internet explorer), turn off javascript and clear the broswer cache.

  

Next tether your iPhone by plugging the the device via USB and open up the page you want to debug in Safari on the iPhone. Back on the laptop check the 'Develop' menu again in Safari and you should see your iPhone (You may need to quit and restart safari on the desktop if it doesn't show straight away). Hovering over your iPhone in the menu will show all the open web pages you have on your iPhone, click on one of pages shown and the Development Tools will open up.

  

When you hover over the elements in the web inspector the tether iPhone browser will highlight the correct elements which will allow you to debug or edit the HTML elements, CSS and Javascript with ease.

Don't have an iPhone or iPad handy? You can also use the same techneqic to debug web pages and webUI's in the Xcode iOS Simulator. You will of course need to download xCode from the mac app store, this comes with the simulator tools, just open the simulator, load Safari and the iOS Simulator will appear in the 'Develop' menu. This is great for developing native iOS apps as well.