[Webdev Hotness] Adobe Releases Shadow, A Tool For Synchronized Browsing And Remote Debugging Between Your Desktop And Multiple Android Devices

Adobe has unveiled Shadow, a new way for front-end web developers that aims to make designing and testing your website layouts on multiple screen sizes an absolute breeze. Shadow is actually a collection of tools consisting of:

a desktop program for Windows or Mac
a Chrome extension
an Android or iOS app

Once you install the two desktop components on your computer and the mobile apps on all your development devices, you simply pair each one via a simple pin into a single network of sorts, and voila - say hello to synchronized browsing and refreshing in Chrome. Just load up a website you're working on in a Chrome tab on your computer, and it'll instantly appear on all paired devices. Switch tabs, and all devices follow along. Neat, right?

Adobe isn't stopping there - Shadow not only allows for synchronized browsing across all paired devices but also remote debugging and inspection using Chrome's Developer Tools. Load a web page on your computer, use the Dev Tools to inspect, edit, or delete elements, and watch your mobile devices reflect the changes instantly.

I've tried Shadow on my laptop and minutes after had my Epic Touch paired and rocking synchronized websites exactly as advertised. The only issue I've encountered is it seems like the web pages load independently on all devices, which becomes a problem if a website serves different versions to mobile and desktop devices. For example, I was looking at yahoo.com on my laptop, but the phone loaded m.yahoo.com. I'm sure Adobe will address it in the future.

The Shadow tools are free while in this beta/technical preview period, but will later be offered by Adobe for a yet unknown price. According to Forbes, "the pricing will follow a two tier model that will make it affordable to smaller and larger shops alike." We'll see about that. In the meantime, why not enjoy Shadow for free?

For an excellent overview of Shadow's functionality, watch this Adobe-authored video, then hop onto the official Adobe Labs Shadow page to get started.

Adobe Shadow is for web designers and developers who are targeting mobile browsers. After installing Shadow on your computer, you’ll be able to pair your devices, have them browse in sync with your computer, and perform remote inspection and debugging so you can see HTML/CSS/JavaScript changes instantly on your device. This application requires Adobe Shadow software for Windows or OSX.
Shadow consists of Windows/OS X applications, iOS/Android apps, and this Chrome Extension
Features:
● Wirelessly pair your Android devices to your computer
● Synchronously browse with your computer
● Target a device for debugging, select an element in the DOM, then:
● Make changes to your HTML markup
● Tweak your CSS rules
● See changes instantly, on your device