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:
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.
Shadow consists of Windows/OS X applications, iOS/Android apps, and this Chrome Extension
● 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