Test and Debug Local Sites on iPhones and iPads

I needed to find a way to use browser developer tools to test and debug a local site on touch devices like an iPad or an iPhone. Thanks to Safari, there is a way!

Utilizing browser developer tools

I couldn’t imagine developing a site these days without browser developer tools. CSS can be a finicky beast but can be tamed with these tools by seeing exactly how each attribute effects each element. I’ve learned more about front-end web development from browser tools than any other resource. As valuable as they are for CSS, the built-in consoles may be even more valuable when debugging Javascript.

bp_2_devTools

Testing on multiple devices

Everyone knows that mobile internet surfing numbers are soaring out of control but you don’t realize the severity until you see it with your own eyes. Sometimes while walking down the streets of Boston or waiting for my train in North Station I would play the game How many smart phones?. The results were amazing, no less than 30%-40% of the people were on their phones, thats including the people walking down the busy streets.

So as a web developer or designer, it is your obligation to test your sites on mobile devices just due to the huge percentage of viewers. In the beginning stages of development you can adjust the width of your browser window to stimulate the different screen width sizes. But eventually you will reach a point where you should be testing your site on actual devices. This is where the point of this post comes into play…

What I used

Computer

Devices

  • iPhone 5 ios7,┬áSafari
  • iPad 7.0.2 ios7,┬áSafari

1. Configure Safari Webkit Nightly on your computer

If you haven’t already done so, download Safari Webkit Nightly. Make sure ‘Show Develop Menu in menu bar’ is checked. This is located in Safari > Preferences > Advanced

bp_2_safariSettings

2. Find your local computer IP

This can be found at System Preferences > Network. If you are connected to Wi-Fi, then your IP address will be shown under Status. Test this URL out in Safari Webkit Nightly and you should see exactly what you would normally with localhost.

3. View local computer IP in Safari

Now you should see your local development site on your device.

4. Turn Web Inspector on

On your iPhone or iPad open Settings > Safari > Advanced. Turn Web Inspector on.

5. Plug your device into your computer via USB

6. Activate Web Inspector

Go to the Develop menu in Safari Webkit Nightly and find your device and select your local IP.

You are now developing locally and testing on mobile touch devices!

2 Responses to “Test and Debug Local Sites on iPhones and iPads”

  1. Erica

    Good stuff Steve! I am def. one of those people on the phone all the time. My site is responsive through wordpress, do I still need to do all these steps suggested?