How to remotely inspect the DOM on a mobile device
An invaluable (free) tool for mobile web development
How often have you as a mobile web developer struggled to diagnose a style or layout issue on a particular device through trial and error? Wouldn’t it be so much easier if you could just inspect the DOM on the mobile device as you would on the desktop through Chrome or Firebug? It turns out there is a tool for that.
Adobe has recently been working on a suite of mobile development tools to help create the new mobile web and hedge its bets on Flash. These offerings are collectively known as Adobe Edge Tools & Services. Among these tools is a product called Edge Inspect.
Edge inspect allows you to remotely control a mobile device and manipulate the web browser and DOM as you would on a desktop. This is accomplished by using a combination of tools and techniques.
For starters, you’ll need to download and install the Edge Inspect host server on your desktop. This service will allow the mobile devices to communicate with your desktop over wifi and facilitate the remote inspection.
Once you have all of these components installed, you can configure them to connect to your host server (your desktop) and begin remotely controlling them using Chrome. I’ll admit that this process is a little bit cumbersome, but the features, convenience, and insight that you gain are well worth the trouble.
Some of the primary features are:
What you load up in your desktop’s browser is what will be loaded on your device as well.
In my opinion this is the most valuable reason to run Edge Inspect. You can now use the Chrome developer tools on your desktop to inspect and manipulate the DOM on the remote device. When you mouse over an element in the developer tool, the corresponding element on the mobile device is highlighted, just as it would be on the desktop version. This allows you to rapidly troubleshoot display issues and make changes in real time.
You can also take device screenshots on any of your connected devices to aid in support and problem resolution.
These are just a few of the useful features provided in this software. Best of all, Edge Inspect is free (for one mobile device at a time). Stop banging your head against the wall trying to correct a mobile browser issue and start digging into the code the way you would on a desktop.