07
Mar
image

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.

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

image image image

Thanks, Eulog

Artem Russakovskii
Artem is a die-hard Android fan, passionate tech blogger, obsessive-compulsive editor, bug hunting programmer, and the founder of Android Police.
Most of the time, you will find Artem either hacking away at code or thinking of the next 15 blog posts.

  • jfgencarnacao

    This looks useful, unfortunately for me theres no Linux version

  • MO

    Installed it, paired 6 devices, worked flawlessly. Definite time-saver. Awesome.

    Thanks for pointing this out!

  • MarkG

    Isn't this what Opera has been doing for years using their Dragonfly debugger for Opera Desktop, Opera Mobile, Opera mini?

  • http://blogs.adobe.com/shadow Bruce Bowman

    >>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.<<

    Hi - the behavior you describe here is correct, and not unexpected. Shadow simply sends commands to all connected Shadow devices, and tells them to go to the same URL that you are browsing in Chrome. In your example, the website developers (Yahoo!) are redirecting your device to the mobile version of their site. If you do the same test in your device's default browser, you should get the same experience.

    Thanks for the great blog post!

    Regards,
    Bruce Bowman
    Adobe Shadow product manager

  • Bludeffect

    Maybe you already know, there is a very nice alternative to Adobe Shadow : It is an innovative online web app called Eenox Designer. The platform allows multi devices and interactives HTML5 webpages for mobiles, smartphones and computers. The generated code support multi interfaces simultaneously (Mouses and touch events) and you can also test your creations in real time on your mobile devices just scanning a QR code.

    If you are interested, there is the url : http://eenox.net/

Quantcast