Adobe Shadow is a great new tool from Adobe that allows developers to design and develop their mobile web content quickly by providing a way to inspect and debug from their desktops wirelessly and synchronously across multiple devices. It essentially allows a developer to browse web content on their desktops and see that same content displayed at the same time on multiple devices. At that point the layout can be tweaked on the fly so results can be seen immediately.
If you’re a developer doing mobile development with HTML/JS or PhoneGap, it’s something you should definitely check out. If you’re wondering how it works, the Adobe Shadow desktop application listens for changes in a URL location in the browser, and when a change occurs, it pushes the new URL out to all wirelessly connected devices immediately so the changed content is seen on the devices immediately.
Adobe Shadow consists of the following components and takes just a couple of minutes to get set up and running:
Take a look at this short video showing how it works followed by an explanation of the setup and how to use it (note: no audio associated with this video):
Refer to Adobe Labs for further information on setup.
IMPORTANT NOTE: Adobe Shadow runs wirelessly so you must ensure that all devices and computers have access to the Internet and run on the same network.
If you had forgotten to start your desktop Shadow application in Step 1, you will get a reminder at this point that looks like the following, and the Shadow icon in the toolbar will be grey (rather than blue):
From here you can click on HTML elements and actually modify the CSS inline and see the results on the device immediately. For instance, in the next few screenshots you can see how I updated the background color of the main element no the Google web page on the fly and the results directly on the iPad:
Before shown in iPad Adobe Shadow App
Edit CSS directly on the Desktop in Google Chrome
Result of Edit on iPad
You can also view things like storage resources, network activity and console messages from device interaction. For instance, below is the Resources tab for Google:
A couple other things to note when using Adobe Shadow, is that it will continue trying to reconnect on the device while open, and keep the device from sleeping, so you need to specifically shut it down when you’re not using it or you will run your battery down more quickly do to the reconnection attempts.
Adobe Shadow is based on Weinre (Web Inspector Remote), which is technology that allows you to debug between devices. Weinre is essentially composed of 3 programs or web pages running simultaneously:
target – the web page being debugged
client - the Web Inspector code running as a web page
agent – an HTTP server which allows the target and client to communicate
For more in-depth information of how this technology works, I highly recommend checking out this page: here.
A couple of links to check out…
Adobe Shadow FAQ
Adobe Shadow video by Sr Product Manager Bruce Bowman