Whilst I’m building web pages I make a lot of use of the development tools that modern browsers include. These features are amazing in that they let you inspect the page and make extensive changes to the layout, CSS and other bits of code live in the browser. A kind of interactive debugging session of sorts. However, doing this on a mobile device to get to the bottom of issues isn’t always straight forward. I’ve not found a way to comfortably do this in Chrome or Firefox yet, but Apple have included a nice workflow to do this with iOS and Safari.
If you need to properly diagnose web site issues on an iOS device the process is actually really simple.
- Enable the web inspector within Safari on your iOS device (Settings -> Safari -> Web Inspector)
- Connect your iOS device via a USB cable to a Mac
- Open Safari on the Mac and activate the dev tools (Preferences -> Advanced -> Show develop menu in the menu bar)
- In Safari on the iOS device navigate to the web site you want to debug
- Open the developer menu and you will see the connected iOS device name as sub menu – choose the site from the list
- Start debugging in the inspector window
This works just as you would expect it to. You can inspect the site just as you would during a normal debugging session within any of the big name browsers on a native platform. Very cool feature imho.