Adobe Shadow

Gone are the days of the tedious workflow to test websites on a mobile device.

Before the workflow was

  1. Save and upload your (updated) files to a web server
  2. Navigate to the page from your mobile device, usually taking ~30 seconds to type in the URL every single time
  3. Check and wonder why things aren’t showing up correctly
  4. Fight off the urge to throw your device through a window
  5. Make some minor CSS tweak that probably isn’t the root of the problem
  6. Re-upload
  7. Re-Navigate
  8. Re-Check
  9. Re-Fight off the urge, etc.

The new workflow (after you have Shadow setup) is

    1. Save and upload your (updated) files to a web server
    2. Navigate to the URL from your desktop and have it automatically load on every device you have Shadow running on

I only have to load the webpage on my laptop and it automatically updates WHAAAAA!!!??!?!

    1. Inspect the source of any device directly from your laptop

“Inspect the element from your PC and your mobile device updates as if it were on your PC. BAM TECHNOLOGY

  1. Make Changes from within the developer tools and see them update instantly on your device
  2. Go golfing with all that extra time and headache you just saved yourself

How does it work!?

You need the Adobe Shadow “server” running on your PC.

You then need to download the Chrome extension to install and manage your clients from

Last but not least you need to download the “Adobe Shadow” App on every device you will be testing from. Once it is downloaded and the Server is running your devices will recognize the computer and give you a passcode to connect. 

Enter the passcode into the extension

and BINGO. You are now a wizard.

 

Downside?

It doesn’t work locally. – I can’t hold it against it but for all you CSS Wizards out there:

Tags:

2 Responses to “Adobe Shadow”

  1. Bruce Bowman

    Hi – Glad you are enjoying Shadow!

    When you say the downside is that Shadow does not work locally, what do you mean?

    Shadow works with localhost, and has a nice workflow with xip.io for a virtual hosts workflow too.

    Here’s a movie and a blog post that might be useful.

    http://tv.adobe.com/watch/adc-presents/localhost-and-adobe-edge-integration-in-adobe-shadow/
    http://blogs.adobe.com/shadow/2012/06/19/shadow-xip-io-virtual-hosts-workflow-simplified/

    If there’s something else that is not working for you, please let me know. Our goal is for Shadow to fit in with your workflows, so if that’s not the case, we want to know.

    Bruce Bowman
    Shadow product manager
    @brucebowman
    http://blogs.adobe.com/shadow

    Reply
    • heinen

      Hi Bruce, thank you for your feedback! It is wonderful to see such a useful product being developed with such great support!

      Those links were very helpful as I did not know it could do that, I appreciate your follow up greatly.

      I do have one question regarding the ‘source inspector’ tool that is available to view the source code of a mobile device. Is it possible to see a media query while viewing the source? Usually when I’m running chrome I can re-size it and see the media queries load in the inspector tools but when I am inspecting on shadow, on my device, I do not see the queries in the inspector tools even though they are being used. If you could clarify on this it would be greatly appreciated.

      Thanks for all your hard work and for producing such a wonderful product!

      -Aaron Heinen
      Hardin Design & Development
      Madison, WI

      Reply

Leave a Reply