Adobe Edge Inspect - A promising tool for testing Responsive Websites

Written By

I was following the happenings from South by Southwest (sxsw.com) and came across this tool by Adobe called "Adobe Shadow".

This tool helps in developing/testing responsive web sites. You can pair any number of devices with different form factors in a Wi-Fi network and do synchronized browsing on all of them to see how your web page looks like in different devices. You can also make CSS changes on the fly on any paired device.So, immediately did the research for this and tested some scenarios as usual.Here is my research for Adobe Shadow/Edge-

Adobe Shadow – Analysis

  • Helps in making CSS/HTML/Jscript changes on multiple devices to analyze look and feel on different devices with different form factors simultaneously.

  • Can be used on Windows 7 and Mac. Also, on any iOS and Android devices.

  • Currently only Chrome extension available.

  • Currently available as beta version

My Test environment-

  • Mac Lion OS X - in a macbook air

  • Pairing with - Iphone 4/iOS5, Droid 2 Global/Android 2.3

  • Connected to a Wi-Fi network.

Website used in Test:  www.bostonglobe.com  (Has Responsive Web Design)

Test Scenarios-

Scenario 1 - Installation-

Easy installation.

  • Need the Adobe Shadow client on the desktop. Installation took less than a minute.

  • Download Chrome plugin. Installation took less than a minute.

  • Download Adobe shadow mobile client from iTunes for iOS and Android market place/Google Play (they now changed it) for Android

Scenario 2- Device Pairing-

Just like pairing a bluetooth device (Pretty simple). You will get a Passcode and enter it on the device to Pair

  Scenario 3 - Synchronized Browsing-

  • It was pretty fast in terms of navigating through different pages on the desktop and the same being reflected on the phones almost immediately.

  • I tried playing a video on the desktop and checked whether the same is reflected on the phones but didnt.

  • Any application which needs username and password will need the credentials entered manually in the paired devices in order to get them logged in and make it in sync with the desktop

For example - Sync browsing failed when I tried to see my gmail account as I guess e-mail clients need username and password and have different GUI interface.  Once I entered the username and password manually I could continue sync browsing.

Scenario 4 – Seeing HTML/Jscript/CSS Changes Instantly-

The shadow inspector lets you check whether a web page change is good on the phone in real time.  It allows to edit HTML/Jscript/CSS in real time on the physical devices (phones, tablets) and check the look and feel instantly.

NOTE: Shadow works by listening for page load events in the browser on your computer. When Shadow detects a page load it pushes the URL out to the connected devices. Interactions such as AJAX/CSS state changes and forms interactivity that change the page on the Desktop computer (in the chrome browser) but do not cause the page to load will not currently be detected.

Scenario 5- Browsing in more than 1 phone-

Tried browsing with iPhone and an Android phone. It was still pretty fast in terms of sync browsing and seeing how css changes affect the page on the phones.(only if wireless connection is lost it becomes a little slow)

 

Scenario 6- Known issues/limitations-

  • Not compatible on Android 2.1 version (I did not check for other device compatibility due to lack of access to other phones.

  • This is beta version( but does the trick). I am not sure when Adobe is releasing the full version.

  • Wi-Fi network accessibility.

  • Check out this link which list down some issues too http://forums.adobe.com/docs/DOC-1674

  • Supported libraries/devices/platforms http://phonegap.github.com/weinre/ (scroll to the bottom of the page)

I also used the tool to test different pages of my companies website and it had its own Pros/Cons. 

SUMMARY-

In summary, when the world is gearing towards responsive web design and in the midst of no good approach/tools available for developers/testers  for responsive web design, this is definitely a tool which could be used to aid our effort in creating device agnostic websites.

More info on Adobe Shadow can be found below-

Hit me up with questions if you need more info or share your experiences here :-) Always, glad to help.

Previous

3 Step mobile device selection process - Mobile Testing
Next

Sikuli - One of the first tools I researched for Mobile Testing