When they work with mobile for the first time many designer-developers assume that page changes must be uploaded to a server before they can be seen on a mobile device. This makes for extremely drawn-out troubleshooting: fixes for mobile are guessed at, coded, uploaded, and the mobile browser refreshed, wit this process repeated dozens of times until the problem is solved.
Thankfully, there's a much better and more streamlined way, if you have a Mac and an iDevice (iPhone, iPad, etc).
Before you begin, make sure you have set up desktop and Mobile Safari for web development, discussed earlier.
- Start up Mobile Safari on your iOS device and navigate to the page you wish to test, which could be on a local (development) server or a live site.
- Start up Safari on your Mac and connect to your your iOS device using the standard cable.
- On your Mac, go to the Develop menu in Safari. You should see the name of your device; moving the cursor to that entry will show you the name of the page that is being looked at on your iPhone, iPod, or iPad.
- Choosing the name of the page will bring up the Safari Web Inspector on your Mac. While there are many things you can do at this point, you'll probably want to start in Elements mode; click the appropriate button at the top of the Web Inspector window.
- You'll find that moving the cursor over elements in the Web Inspector in desktop Safari, will highlight the matching elements on the iOS device, as shown in the video at the top of this article. Using this, and the Rules panel on the right side, you can change content, alter the styles for elements, diagnose the cause of display problems, and many other useful tasks, with the results displayed immediately on your mobile device.
Unfortunately, Safari doesn’t yet offer the option to write your changes directly into the source code from the browser, requiring you to transfer any changes over to your editor of choice. However, just as it stands the feature is incredibly useful, allowing you to diagnose issues directly, without guesswork; by comparison, the traditional method is blind stabs at code in the dark.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
