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.
Click the plus icon to create a new connection and enter your computer’s IP Address.
It’ll give you a passcode.
Enter the code in the chrome extension on your computer.
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!
