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

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

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

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

  4. Make Changes from within the developer tools and see them update instantly on your device
  5. 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:

Similar Posts: