If you tweak HTML and CSS and JavaScript on webpages, then you may appreciate how simple and convenient the plugin that goes by the name of Firebug for Firefox has made your life. I know it has for me. It is simply an indispensable piece of technology that I use every time I have to debug a CSS or HTML or JS issue on a webpage. Other browsers, notably Chrome and Safari, have built-in web inspectors which allow similar features.
I have of late been working on a lot of Mobile versions of websites, particularly those optimized for Mobile Safari and iOS devices using the fascinating jQuery Mobile framework. One of my biggest pet peeves while debugging issues on Mobile websites was not being able to debug the sites live on a mobile browser. More times than I’d care to acknowledge a particular mobile site, when viewed on a normal browser would look fine, but would have slight aberrations when viewed on a mobile browser. Those kind of issues are a real pain in the neck, because you are, more often than not, left to get sucked in an annoying cycle of wildly making changes in the HTML/CSS and refreshing the page on the mobile browser continuously in the hopes that the problem would fix itself.
However, today I bumped into a way to inspect and debug a mobile site on Mobile Safari by using Safari on a Mac computer (I am sure that it may work equally well for Safari on Windows, but I have not had reason nor occasion to try to find out). It not only works so well, but is also very straightforward to set up.
My testing environment includes an iPhone 4S running iOS 6 and a MacBook Pro running OS X Lion 10.7.5. Here are the steps you must follow in order to be able to inspect mobile web pages live via Safari on your Mac:
- On your iOS device, turn on “Web Inspector” inside the Advanced settings for Safari. You’ll find these under the Settings app.
- On the Advanced tab under Preferences for Safari on your Mac, you must check the “Show Develop menu in menu bar” setting.
- Connect your iOS device to your Mac via the data cable.
- You may now load on Mobile Safari the mobile webpage you want to inspect.
- On Safari on Mac, open the Develop menu in the menu bar, select the name of your iOS device that will appear in the list, and click on the webpage shown on the pop-up that slides to the right.
The web inspector in Safari will kick in. You may explore the different tabs and functionality available there. The only downside is that no preview of the page is available on the inspector. Instead, the live page open on your Mobile Safari is the preview. You may go through the HTML source displayed inside the inspector, selecting the elements you want to inspect and notice that the corresponding elements are highlighted on the device. What’s more, you can also live edit the source as well as CSS, and they take effect almost immediately. How awesome is that!
Libel 