Adobe Shadow Device Mirroring

Adobe Shadow on an iPad, iPhone, and MacBook Pro
Adobe Shadow on an iPad, iPhone, and MacBook Pro

I recently started using a new tool for testing website designs across different mobile device screens without the hassle of having to refresh each browser I’m using.

Adobe Shadow is a free tool from Adobe that allows you to mirror your desktop Mac or Windows computer to multiple mobile devices. You can pair your desktop to iOS and Android devices, including the Kindle Fire. Shadow can connect to an unlimited number of mobile devices.

Adobe Shadow works by running an application on your desktop computer and using a Chrome browser extension to connect the desktop browser with your mobile devices. Your desktop computer and mobile devices have to be on the same network. The device synching worked fine on my home Wi-Fi network but I encountered problems with my wireless network at work due to corporate security settings that block certain ports.

Once the computer is paired with your mobile devices, the mobile displays are updated in near real-time as you browse on the desktop computer. This makes it easy to test things like media queries or any conditional logic that is using the user-agent string to tailor the layout for that device. This is done by sending a command to the mobile device that contains the URL of the page being viewed on the desktop.

Shadow also allows you to do remote inspection and editing of the HTML or CSS and immediately displays the results on all your mobile devices.

There is a video demonstration of Shadow on the Adobe Labs website.