logo

Adobe Shadow: Easy Way to Test Websites on Mobile Devices

Adobe just announced the free Shadow software, which lets you simultaneously browse websites on your PC and your mobile devices (iOS or Android) - making testing during development of websites a whole lot easier.

It works by installing a mobile app on your devices (phones, iPads, etc) which listen for instructions from the Shadow software on your PC. In turn, the software on your PC listen for instructions from a Chrome browser extension. As you browse in Chrome all the connected devices follow along as you move around and change the site. Refresh the page in Chrome and the devices refresh too. Click a link to another page - the devices follow along too.

It's probably better explained by video:

I've given it a go and it works well and is easy to setup. I'll definitely be using it from now on.

Limitations

It's worth noting that the Adobe Shadow app installed on your mobile device has its own browser built in. At least that's how I understand it to work. Apparently that browser is WebKit-based. So, if you setup Shadow to test on, say, an iPhone, iPad and a Galaxy S2 all at the same time, you're only really testing in the same browser but on different screen sizes.

Also, if you like developing using localhost then it won't work without use of some kind of DNS to point your devices to your PC.

I could be wrong on both counts above, but that's how I interpreted it. Still it's a great tool. Just remember it's not a replacement for properly testing sites on the native browsers on the devices once initial development is complete.

Comments

  1. All browsers on IOS render websites the same way because you really cannot use anything else than the supplied WebKit engine. Android may be different. On my iPhone and iPad I use Atomic web browser almost exclusively because it has more features than Safari, but the sites are always rendered the same - except in Atomic you can use adblock filters which is a godsend.

    Adobe Shadow looks like a nice tool. I had some problems with web inspection tools - where you inspect the DOM tree and delete or modify elements. It still has some bugs, but it was impressive to see the same site and synchronized navigation on multiple devices. Will probably use it for my next Bootstrap bootstrapped app.

    1. Have you seen that Bootstrap 2 now has uses responsive CSS to scale down to smaller screens!?

      Show the rest of this thread

    2. I've done some further reading and, according to Wikipedia WebKit is:

      "the default browser in the iOS, Android, BlackBerry Tablet OS and webOS mobile operating systems."

      So I guess it makes sense to use Webkit in Shadow too. I feel a bit better about using it now.

      http://en.wikipedia.org/wiki/WebKit

      Show the rest of this thread

    • avatar
    • H
    • Mon 12 Mar 2012 06:09 PM

    Of course iThings and Android may all be running different versions of webkit so you may still get different results between them. Plus Android now has chrome on some ICS devices which is also webkit but likely a lot newer than stock Android browser and iThings due to it's regular updates. HTH.

  2. My new utility called CrossBro has just extended the capabilities of Adobe Shadow by being able to edit PHP files (and others!) as well enabeling true cross browser development on a multitude of devices etc. with automatic browser refreshing as you edit and your code.

    www crossbro com

    Instantly see how your development code looks on a PC in Chrome, Firefox and IE (others can be included) and with the aid of Adobe Shadow see how your code looks on Mobile/tablet devices in realtime as you work.

    Please take the time to review the utility and I 'm sure you will see its amazing capabilities of this true browser refreshing tool.

    Regards,

    Colin

    www colinord com

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Mon 12 Mar 2012

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

More Content