How to remotely inspect the DOM on a mobile device

An invaluable (free) tool for mobile web development

By  

Source: Adobe

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.

Next you’ll need to install Google Chrome on your desktop if you haven’t already. This is because the actual remote inspection is done via an Adobe Edge Inspect Chrome Extension.

Finally you’ll need to install the Adobe Edge Inspect mobile app on your device. Currently this app exists in the Google Play store and in the Apple App Store for both tablets and phones.

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:

Synchronized Browsing

Source: Adobe

What you load up in your desktop’s browser is what will be loaded on your device as well.

Remote Inspection

Source: Adobe

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.

Screenshots

Source: Adobe

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.

Join us:
Facebook

Twitter

Pinterest

Tumblr

LinkedIn

Google+

Answers - Powered by ITworld

ITworld Answers helps you solve problems and share expertise. Ask a question or take a crack at answering the new questions below.

Join us:
Facebook

Twitter

Pinterest

Tumblr

LinkedIn

Google+

Ask a Question
randomness