Using Adobe Edge Inspect for Cross-Device Web Page Debugging and Synchronized Browsing

Using Adobe Edge Inspect you can inspect your webpages (like you do in chrome dev tools) across various remote devices (mobiles, tablets, etc.). You basically connect multiple iOS or Android devices to your computer wirelessly (this happens via adobe’s servers). Then all you do is browser in your Chrome and those devices will stay in sync, i.e., open/refresh the webpage that you’re viewing in chrome. You can then fire up an inspecting tool (in your computer) to inspect html, css and do a lot more (like dev tools) in those devices. The inspection is done via weinre.

Apart form this, you can take screenshot of the webpage from each device (with the device’s info), refresh all of them in a single click and enjoy a lot more features. Pretty cool!

Setting Up

Adobe Creative Cloud Signup

Signup for an adobe creative cloud account at http://creative.adobe.com. Next, you need to install 3 things.

Download Edge Inspect

Download and Install the edge inspect software from https://creative.adobe.com/inspect on your computer (not available for linux currently). After installation follow the edge inspect docs here or the steps below.

What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.

Install Google Chrome and Edge Inspect Extension

Get Google Chrome and install the edge inspect chrome extension from here.

Install Device Clients

You’ll have to install edge inspect clients on your devices:

iOS devices
Android devices
Kindle Fire devices

… or just search for ‘Edge Inspect’ in the related stores and install the client app.

Inspection

Now that the installation process is done, you can start inspecting your webpage right away given the computer and devices are in the same network. You can connect to a single device only. For unlimited devices, you’ll have to upgrade your creative cloud plan or just upgrade edge inspect.

Start up the edge inspect application on your computer as well as the device. If you have bonjour on your computer then you can auto discover devices in your network else just connect manually by entering the IP Address.

Edge Connections

Click the plus icon to create a new connection and enter your computer’s IP Address.

Edge Manual Connection

It’ll give you a passcode.

Edge Connection PassCode

Enter the code in the chrome extension on your computer.

Chrome Extension PassCode

Finally you’ll see a ‘<>‘ icon, click that to launch the dev tools (weinre) and start inspecting! You can also refresh all your devices or request for screenshots.

If you need some help with making edge inspect work properly with local virtual hosts then check this out.

Hope this helps. Happy testing!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Author: Rishabh

Rishabh is a full stack web and mobile developer from India. Follow me on Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *