dobe 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. For the full post visit the blog post link or download this file. Blog link: http://jbkflex.wordpress.com/2012/04/16/adobe-shadow-another-way-of-remote-debugging-mobile-web-apps-in-ios-and-android/

1. Adobe Shadow – another way of remote debugging mobile web apps in iOS
and Android
Logo used from Adobe Labs site
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.
Personally, after trying both Adobe Shadow and Weinre, I found Shadow easier to configure and get started with debugging mobile web
applications remotely. For Weinre you have to install Java separately, use command line instructions and also inject javascript into the client
code. This at times is a hassle and confusing for first timers.
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.