Adobe Shadow – Inspect/Debug your Mobile Web Content

June 4, 2012By 1 Comment

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:

  • Adobe Shadow Desktop Application
  • Adobe Shadow Google Chrome plugin
  • Adobe Shadow Mobile Clients (for iOS/Android devices)

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):

Setup

Desktop

  1. Install the Adobe Shadow desktop application from Adobe Labs
  2. Ensure you have the Google Chrome Browser installed (it’s free)
  3. Open the Google Chrome browser and add the Adobe Shadow Google Chrome Extension from the Google Chrome Store

Mobile Devices

  • Go to the AppStore on your iOS devices or Google Play (Android Market) on your Android devices and download the Adobe Shadow mobile device client apps

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.

Mobile Inspection

  • Start-up the Adobe Shadow Desktop application. You should see the following upon execution:

  • Next, open the website or app to be inspected. In this case I’ll use Google to keep things simple, but you could open any web content that you’re currently working on.

  • Click on the blue Adobe Shadow icon in the top right corner of the Google Chrome browser toolbar. You will see a drop-down black box displayed that looks like the following:

    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):

  • Now go to your devices and click on the Settings icon in the top left corner. You should now see any computer connections currently running Shadow. In my case I have my MacBook-AIR connection started and waiting, so I click on that to establish the connection back to the latop. I will be notified on my device when the connection is established, such as in the following, as well as any previous connections you may have made to other computers. as shown below:
  • Once the connection is established, you can go back into your Google Chrome Shadow icon on your desktop and see all the devices that have made a connection, such as in the following:

  • Next you can either change the URL location on your desktop Chrome browser to see the synchronous browsing occur on your devices (or trigger the URL change with clicks within your app), or you can start doing remote inspection on a specific device and update CSS etc to see the immediate effects. To start remote inspection on your device, click the double arrows on the black box next to the device you want to inspect:

You will be presented with a weinre screen. Adobe Shadow includes the open source weinre project as it’s core engine for remote inspection. See below for more information about weinre.

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.

weinre
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

Filed in: Uncategorized Tags:

About the Author ()

Comments (1)

Trackback URL | Comments RSS Feed

Sites That Link to this Post

  1. Using Adobe Shadow to Test Websites on Mobile Devices | Atomic Spin | August 2, 2012

Leave a Reply