Over the last couple years, we’ve seen responsive Web design become ubiquitous. However, debugging and QA-ing responsive sites is a challenge in its own right. On the desktop, developers rely heavily on Web-inspect tools, like those found in Google Chrome or Firebug for Firefox.
However, when it comes to mobile device debugging, developers are often left with the painful process of guesswork when it comes to targeting the right selector or script.
But, this archaic process can easily be accelerated using a number of mobile Web development tools, including remote inspection tools, now available. Some are even built into the devices you already own.
Remote inspection tool options
Additionally, you’re limited to the device’s default browser when testing. The big stickler is the use of weinre as their underlying technology. While not terrible, weinre occasionally manifests some strange behavior when debugging certain elements, making the process that much more cumbersome. Lastly, both require a small investment and standalone installations.
A great alternative, which doesn’t require any additional purchases or downloads, is to use the Safari Web developer tools already built into Apple devices – mobile devices running iOS 7 or higher and Macs running Mavericks or higher. (The disadvantage to using the Safari Web developer tools is that you’re limited to Apple device testing. If you’re concerned about Android devices, you should consider using Adobe Edge Inspect or Ghostlab.)
Follow our simple five-step tutorial, and you can have the Safari Web developer tools running on your iOS device and Mac in a matter of minutes.
Get up and running with the Safari Web developer tools for remote inspection
1. Ensure that the Web Inspector tool is enabled on your iOS device. Open “Settings” on your device, navigate to “Safari,” then click on the “Advanced” tab. From here, ensure that Web Inspector is toggled on.
2. Connect your iOS device to your Mac with a USB cord.
3. You’ll want to ensure the “Develop” menu is available in Safari on your computer. Open the “Preferences” pane within Safari, click the “Advanced” tab and ensure the “Show Develop menu in menu bar” box is checked.
4. On your iOS device, open Safari and navigate to the Web page you wish to debug or test. Then open Safari on your Mac and navigate to the Develop tab. Look for the name of your device and select the Web page opened on your mobile device.
5. Once you’ve selected the site, an inspection dialog box will open in a new window. From here you can use any of the tools to get your site functioning and looking great on mobile devices.