Adobe Edge Inspect (previously known as Adobe Shadow) is a preview and inspection tool that helps frontend web developers and designers to develop and test web projects targeting mobile web browsers. With Adobe Edge Inspect you can pair multiple mobile devices and browse in sync with your computer, remotely inspect and debug your mobile web projects, make changes to the HTML markup, CSS style rules, and JavaScript, and instantly see the changes in the targeted mobile devices. This ensures that your mobile web page looks as intended across the multiple mobile devices that you are targeting for your audience.
Normally when you develop a mobile web application, you first debug and test the changes in your computer browser. I used to do this but found these three major problems with the traditional way of debugging for mobile web applications:
Resolution issues: Your mobile device is much smaller than your computer. So while testing it in your computer browser you have to restrict it to a particular resolution/size to replicate the targeted mobile device. But if you are testing for multiple mobile devices of different resolutions then it becomes difficult to change the size values every time you test it in your computer browser. To make things worse, sometimes even the changes made in your computer browser are not reflected accurately on the mobile device.
Touch events: Your mobile web application will normally use JavaScript touch events, for example, if you are creating some kind of animation app that relies on finger touch gestures. So if you are testing your application in a computer browser then you have to map those touch events to mouse events and then again map it back to touch events when viewing on a mobile device. This is cumbersome until you have an automatic way of detecting the touch capability of the device browser and then handle the events accordingly.
Lack of a web inspector in mobile browsers: There is no real web inspection tool such as a Firebug or a Chrome developer tool in a mobile web browser. All that you can do is run the mobile web application in a computer browser and use its web inspector to debug it. But that does not actually help in terms of viewing the changes directly on the mobile device and you do not know how it will look on the mobile device itself.
So, if you are a developer or a designer targeting mobile browsers and you have faced these issues before then you can thank Adobe Edge Inspect as it directly handles all of them.
At the time of writing this book, Adobe Edge Inspect is targeted only for Webkit-based mobile browsers and Adobe has supported only Apple iOS and Google Android devices. So, as of now, you can test only on these two types of devices. This is one downside of Edge Inspect but nevertheless major and popular mobile platforms prefer the Webkit-based browsers, and mobile Webkit is the way to go for mobile browsers.
As an example, see the following image, which shows multiple mobile devices (an iPod Touch, an Android phone, and an iPad) being paired to my computer with Adobe Edge Inspect over a wireless network and how a page (I have chosen the Edge Inspect home page http://html.adobe.com/edge/inspect/) opened on my computer browser is in sync with all the connected mobile devices. This is what Edge Inspect does—it will instantly preview the web page in all your targeted mobile devices and you will immediately know how it looks. It also provides familiar inspection tools with which you can debug your application.
You can see that the layout and the design of the page changes automatically on the mobile devices (of course, your page has to implement that logic, for example, by using CSS3 media queries). I mentioned it here just to say that Edge Inspect can detect such responsive CSS designs and render the page accordingly in mobile devices.
Now, to remotely inspect and test the page, you can target any paired mobile device from the list, make changes to the HTML/CSS/JavaScript on your computer using familiar debugging tools, and see the changes being updated directly in your device in real time.
We will talk about this in detail in the Quick start – pairing mobile devices with your computer and Top 7 features you'll want to know about sections of this book.
Let's quickly check out what else we can do with Adobe Edge Inspect:
Screenshot: Take a screenshot of the page opened on any or all of the connected devices from your computer.
Cache: You can clear the cache on any or all of the devices from your computer itself.
SSL support: Adobe Edge Inspect supports pages with certificates. Connected Edge Inspect devices will provide a dialog prompting you to accept an unsigned certificate.
Run full screen on mobile devices: You can toggle full screen display on all paired mobile devices so that more of the real estate is available for testing.
There are several other features that we will talk about in detail in later chapters including the ones mentioned here.