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?
There is one limitation at least for now: all the devices must be connected to the same Wi-Fi network.
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:
As you select nodes from the DOM you will see that on the mobile device that very DOM element is highlighted.
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