andyMatthews.net
Adobe Shadow makes debugging websites on mobile devices a breeze
A cryptic tweet came out yesterday from Adobe's Bruce Bowman.
A new #Adobe product is launching tonight. Keep your ears, eyes and Tweets open! #MobileRelief is coming.
Well today the waiting is over and Adobe Shadow is now available for testing on Adobe Labs. What's Shadow you say? Here's a quote straight from the horse's mouth: "Adobe� Shadow is a new inspection and preview tool that allows 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." In short, Adobe Shadow lets web developers easily test their designs on mobile devices over a wireless connection. Let's take a quick look at how to set this up.
- Head over to Labs and download Adobe Shadow for Mac or PC
- Install the app for iOS or Android
- Download and install the Google Chrome extension
Once you've got your software installed it's time to fire up the app. Open a new tab in Chrome, and click the button circled in orange. This opens a window allowing you to enable Shadow, as well as see which devices are connected to your computer. At first Shadow tells you that it's waiting for a connection, so switch to your mobile device and open the Shadow app. You'll see a brief loading animation and then after Shadow detects your computer over the network it will present you with a passcode. This passcode is your ticket to mobile debugging goodness.
Take this passcode and input it into the modal window in Chrome. Once the handshake is established, the modal window will change to indicate the name of the device that's been connected. Once this happens, simply browse a website in Chrome's active window. As soon as the page loads, you'll see your device update it's display to reflect the current website. The great thing about Shadow is that it's not just an image. It's a real website, loaded on your device. That means that distinct session information works, mobile device detection works, media queries work. It all just works; and it doesn't just work with one device, or two devices, or three. Adobe Shadow places no limit on the number of devices which can connect to a single computer. There probably IS a limit of some sort but who has enough devices to hit it?
As if easily viewing your sites on multiple devices wasn't enough, Adobe also built a tool called Weinre into Shadow. It's by the same people who built Phonegap, so you know it's good. Weinre (pronounced winery) is like Firebug, or Chrome Dev Tools, for your mobile device...on your desktop. How's that again? See that double-facing arrow over there? Click it and you're presented with a window that should look familiar to you.
An in-depth article on Dev Tools is beyond the scope of this blog post, but suffice it to say that this will make debugging your mobile websites on your device much, much easier. You have a full suite of tools at your disposal including a console, network tab, timeline and more. Everything you should need to figure out why that paragraph tag is floated underneath your menu when it's supposed to be on the right side.
Now lest I sound overly zealous there are a few hiccups. It's still in labs which means that it's still under development. Look for speed and performance improvements over the next few months. Also, it has one possibly serious issue that will impact many of us. It only detects standard page load events at the moment (item number 3). That means that if your app does all of it's interaction via AJAX, and you don't have a URL based version of it, then no dice for you. The good news is that for jQuery Mobile development, you can just reload the new page and see the content...you just won't get the transitions.
All in all, this is a fantastic tool for development and a Godsend for mobile website developers everywhere. Try it out, consider buying it when it's released, and keep building awesome sites.