Introducing Adobe Shadow – a new way to debug mobile web sites and apps

So what is Adobe Shadow? Shadow helps developers who work on mobile web sites and applications by enabling them to do “synchronous browsing”. You connect your mobile devices to your computer and then you navigate to a page on your computer and all the devices are synchronized displaying the same web page.

So when you open an URL in your desktop browser, all the connected devices will stay synchronized displaying the same URL. Furthermore, you can open up a debug session with one mobile device and use Web Inspector to check the DOM as it was generated on that device, check the CSS properties for DOM elements, resources, and network calls.

It supports iOS and Android devices and it works on Windows/Mac OS computers using the Chrome browser.

How does it work?

Under the hood, Adobe Shadow uses the weinre project (I wrote about weinre here). The main difference is that there is zero configuration setup when using Adobe Shadow (no need to add the weinre JavaScript file to your webpage in order to enable the workflow) and also you get the this nice synchronization between devices where the connected devices follow the computer browser.

There is one limitation at least for now: all the devices must be connected to the same Wi-Fi network.

Installing Shadow

The installation process is quite simple. You grab the desktop Shadow app for your operating system. You install the Shadow Chrome extension from here.

Then you install the Shadow app for your mobile devices from the app stores (iOS App Store and Android Market).

You can read more about this process on the project page.

Shadow in action

Now let’s see how you use Shadow. Once you’ve installed everything, you are ready to pair the mobile devices to your computer. Here are the steps:

1. Make sure your computer and mobile devices are connected to the same Wi-Fi network.

2. Start the Shadow application on your computer and make sure that the Shadow Chrome extension is enabled.

3. On all your mobile devices start the Shadow application and choose the computer you want to connect to (you will see all the computers running Shadow and connected to the same Wi-Fi network).

4. The first time you pair a mobile device to your computer you’ll have to provide a PIN. So once you select the computer you want to connect to, the mobile device will display a PIN number.

5. Grab the PIN number and type it in the Chrome Shadow Extension (you will see that the extension displays a little green plus every time a new device needs pairing)

6. That’s it. From now on your devices are connected (your mobile device and your desktop/laptop computer). What’s more: you need to do this only once for a pair. Of course, if you need to disconnect or reauthorized a device you can do this (you do this from the Shadow Chrome extension).

Starting a Remote Inspection session

Once the devices are connected via Shadow, choose the brackets icon corresponding to the mobile device you want to debug. See the picture below:

This will open up the Web Inspector that it is connected to the selected mobile device. You can go to Elements and select a node and you will see it highlighted on your mobile device. You can check the Console or check the CSS properties and metrics. You can even play with the JavaScript Console.

As you select nodes from the DOM you will see that on the mobile device that very DOM element is highlighted.

Here I used the Console to remotely execute some JavaScript code (alert(‘Hello Adobe Shadow! ‘)):

And here is the result of the JavaScript code execution on the device:

Conclusions

I think that Adobe Shadow brings mobile development to a whole new level by greatly simplifying the testing and debugging of web pages and apps on mobile devices. Right now it is in beta and it is free so make sure you go to Adobe Labs, grab Adobe Shadow, and give it a try.

Although there are other methods to do mobile testing for web pages (I am thinking of weinre and Google Chrome for Android), I think Adobe Shadow offers more value. Someone from the team told me that at some point he had 35 mobile devices connected to his computer and it was awesome to see how different web pages were rendered on all these different devices.

Also, keep in mind that this is just the beginning. The team has many more ideas and we are happy to listen to your feedback. So don’t be shy :D

Actually, if you want to keep a close eye on the team you can follow them on Twitter and is the team blog, here.

3 thoughts on “Introducing Adobe Shadow – a new way to debug mobile web sites and apps

  1. Pingback: Adobe Shadow – Outil de debug sur devices mobiles (iOS et Android) sorti des labs | HTML5 Tutorial

  2. Hi
    Thanks for sharing Adobe new tool with us. It allows us to view and test our designs on multiple devices at the same time. It helps 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.

  3. Pingback: Adobe Shadow Release 2 is out : Mihai Corlan

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>