Mobile Web development tools: Fast-track responsive Web design with remote inspection

Posted June 24, 2014 in by

mobile web development tools 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

Two commonly used remote inspection programs are Adobe Edge Inspect and Ghostlab, both giving developers the ability to remotely test multiple devices and platforms simultaneously in their original state. These programs give you the ability to browse in sync with your computer and perform remote inspection and debugging, seeing HTML/CSS/JavaScript changes instantly on any connected device. While both are excellent tools, they have their downsides. Each requires a connection through an IP address provided, oftentimes leading to unreliable connections.
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.

A couple situations where this can be extremely helpful are when you’re trying to adjust spacing for mobile devices within CSS or attempting to debug mobile JavaScript errors. We’ll close with an example of how this could be used when tackling CSS spacing issues. Happy testing!

Share on FacebookTweet about this on TwitterShare on LinkedInShare on RedditShare on Google+
Share.