I’m currently working on responsive websites that support not only desktop browsers, but also Android and iOS – at any resolution. Testing becomes quite a task when it comes time to stop writing new features and preparing to check in. I have multiple devices to test on, and because they are physical devices, it is even more of a pain.
Adobe has created a solution to this problem in a tool called Adobe Edge Inspect:
Edit 10/31 – this is now called Adobe Edge Inspect (the software formerly known as Shadow).
Adobe Edge Inspect, from Adobe Labs, is a free utility for developers. It mirrors / broadcasts what you are looking at in Chrome to all your mobile devices. It supports Android, iOS, and Kindle Fire.
This is a time saver. Now I am always at the same point of reference on each mobile device.
There are three places where it gets installed: your workstation for the server component, a Chrome plugin, and as an app on your mobile device. Took about 5 minutes to get going. The hardest part was finding the icon in Chrome:
Here it is in action:
Drawbacks:
A) Doesn’t work with session! The first few times I tried logging into an app I was working on, my desktop went in fine, but on the phone it forwarded me to the invalid session page… From the Adobe Shadow FAQ: ” The Shadow Chrome Extension does not access Cookies, Session Data, Authentication Information, Page Content, Browsing History or other personal data.”
So, I manually login on the phone, but then I can continue steering from the desktop. It is nice that it lets you independently navigate on the phone – you are not completely tied to what you are seeing on the desktop.
B) Doesn’t mirror anything beyond changing URLs. Scrolling and all page level actions, like typing, or opening dialogs, it still completely up to you on each phyiscal device.
Still, it is a neat idea. Thank you Adobe Labs!
For more information:
This talk: Fluent 2012: Paul Irish, “Javascript Development Workflow of 2013” has lots of nice goodies for pro front end developers and is only 24 minutes!