Adobe Shadow has been out for over a month now, and I’ve finally had a chance to start integrating it into my development workflow. Shadow is a new tool that provides you with a synchronized desktop & mobile browsing experience, and it even lets you inspect & modify the HTML DOM on the remote devices. Basically, you just connect the devices, then navigate your content on any of the connected devices for a synchronized browsing experience. Fellow Adobe employee Christian Cantrell has a great video overview of Adobe Shadow on his blog, if you’d like to learn more.
I’ve been focusing on multi-platform HTML-based solutions, especially with the app-UI framework/library. Shadow has become very handy when testing features on multiple devices. App-UI is a free & open source collection of reusable “application container” user interface components that may be helpful to web and mobile developers for creating interactive applications using HTML and JavaScript.
Basically, I just point the desktop Chrome browser at the page I want to test on my devices, and all devices will navigate to that particular page. Quick, easy, and to the point. Check out the video below where you can see the synchronized browsing experience in action.
In my examples that have browser history integration you can even see that selecting an item in the list causes all devices to navigate to the selected item (starting at 25 seconds into the video). It does not yet necessarily solve every issue around button clicks and scrolling, but it certainly helps streamline the testing of a single page/experience on multiple devices.
Enjoy!