Adobe has come out with the preview version of their new tool Adobe Shadow that allows front-end web developers and designers to work faster and more efficiently by streamlining the preview process, making it easier to customize websites for mobile devices. With shadow you can remotely preview your mobile web projects and also debug them. In fact Shadow uses the WEINRE debug/web inspector client to allow developers to remotely inspect HTML , view console logs and also make changes to the DOM. In the last post I have talked about WEINRE in details. You can refer it if you are new to WEINRE.
Shadow allows multiple devices (mobile devices) to connect wirelessly to your computer and as you browse in your computer all the target mobile devices will be in sync. So when you make changes to the HTML DOM in the computer you can see the changes instantly on all the target devices.
You need three things to configure Shadow and get started,
1) Shadow helper application. Install this in your computer. Shadow is not available for Windows XP so you need a Windows 7 machine or a Mac (OS X 10.6 and 10.7) machine. This helper application must keep running at the time of a debug session that you will carry.
2) Google Chrome browser extension for shadow. You need to install the extension. You will get the link to this in the downloads page below.
3) Shadow client app for iOS or Android. Whichever mobile device you have, go to the app market and search for Adobe Shadow, find it and then install it. For example go to Apple App Store and get the Shadow app and install it.
You can find all the downloads in the Adobe Labs site : http://labs.adobe.com/downloads/shadow.html
You can also find a very nice video demonstration to get started : http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow.
This post was just a kind of teaser for you and in case you have not heard about Adobe Shadow you can give it a try. I also look forward to come out with a detailed tutorial on how to use Shadow with screenshots of my instance. Till then I am continuing to explore Shadow and similar tools.
Below are some of my previous tutorials that should help you.
- Debugging mobile web applications remotely with Weinre: http://jbkflex.wordpress.com/2012/04/12/debug-mobile-web-applications-remotely-with-weinre/
- Use your own Weinre server with Adobe Shadow – Step by step: http://jbkflex.wordpress.com/2012/08/28/use-your-own-weinre-server-with-adobe-shadow-step-by-step/
- WEINRE – Web Inspector Remote Video by Patrick Mueller: http://jbkflex.wordpress.com/2012/09/18/weinre-web-inspector-remote-video-by-patrick-mueller/
1) Now that Adobe has released version 4 of Shadow they have included a very nice feature of adding or using your own Weinre debug server with Shadow. What it does is that it fastens up the connection time, performance and keeps the remote traffic local. So if you have a local instance of the Weinre server running in your computer, you can use that as a debug server for Adobe Shadow instead of using the remote debug server hosted by Adobe at http://debug.shadow.adobe.com:8080/. Read how to do it here.
2) Adobe Shadow is now Adobe Edge Inspect: Read the post and find out what changes has been made : http://jbkflex.wordpress.com/2012/09/27/adobe-shadow-is-now-adobe-edge-inspect/