Posted 10.18.2012

Mobile Site Development: Debugging sites on my iPhone and iPad

As I’ve been gathering links for my 5 at 5 roundups, Adobe Edge Inspect kept resurfacing. I finally installed the app across all my devices Mac, (iPad, iPhone, and the extension for Chrome). Good gravy, this program is awesome!


What it does

  1. It will automatically send any page you load in Chrome to your iPhone or iPad
  2. It allows you to use your Chrome Web Developer tools with your iPhone or iPad

Getting it set up

  • Install the app on all your devices
  • Sync your devices. If you’re not paying for Creative Cloud, you can only have it running on one device at a time.
  • Click on the browser extension. Then, launch the app on your iPhone / iPad (your devices must be on the same wireless network). It will give you a passcode to enter.

 

  • Now, any page active in Chrome will automatically load on your device.

iPhone Adobe Edge loaded

  • If you click the < > it will pull of Chrome’s developer window.

  • Click on the device you’re using in the Web Developer panel

Chrome - Edge Inspector Web Developer Tools

  • It will load the Inspector panel. Any code you highlight will then be highlghted on your device. = SUPER COOL!
Edge Inspector in Chrome, Web Developer Tools
Using Adobe Edge Inspector on my iPhone

 


Couple this with LiveReload (Bonus)

I also found a program called LiveReload. In web development, there’s a lot of change the code, save, reload the browser. Make another adjustment, save, reload. Rinse and repeat. This program simplifies that process, so that when you save your file, the browser will automatically be refreshed.
LiveReload

A blog post on Adobe’s site had instructions for integrating this new workflow with LiveReload with Edge Inspect. (Before you get confused, Edge Inspect used to be called Shadow)


As I do more and more mobile web development, I know that these tools will prove invaluable. What are other tools you use when developing for your mobile devices?