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
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
- 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
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!