Book Image

Instant Adobe Edge Inspect Starter

By : Joseph Khan
Book Image

Instant Adobe Edge Inspect Starter

By: Joseph Khan

Overview of this book

Mobile web testing is currently a really time consuming and cumbersome process as there are no direct debugging tools available with mobile web browsers. Since mobile devices vary so much it is important to ensure that your web page looks as intended across the multiple mobile devices that you are targeting for your audience. Edge Inspect is a perfect tool for web developers and designers who are developing for mobile devices, allowing them to simultaneously test on numerous devices in real time as they develop without learning anything new."Instant Adobe Edge Inspect Starter" is a practical, hands-on guide that provides you with a number of detailed steps, which will help you to get started on testing and previewing all your mobile web projects on multiple mobile devices. This book will also show you how to use all the other available features of Edge Inspect and make the entire testing process on mobile devices very simple, effortless, and faster.This book starts with an introduction to Edge Inspect and will take you through a number of clear and detailed steps needed to set up a working installation, and get up and running with testing your web pages on mobile devices. You will also learn why traditional ways of testing mobile web applications are not very helpful and how Adobe Edge Inspect overcomes it. We will take a look at connecting single and multiple mobile devices with your computer and how to browse in sync. We will learn about remotely inspecting and previewing mobile web pages on a targeted device and directly see the changes taking place on the device itself. We will discuss in detail about creating our very own simple mobile web application, running it from a local server and testing it across mobile devices. We will also take a look at how to use the Edge Inspect web inspector window and do some basic HTML, CSS, and JavaScript debugging. And then finally we will take a look at using our own local Weinre debug server with Edge Inspect and some other very important features. If you want to take advantage of Adobe Edge Inspect and make mobile web testing a lot easier, then this is the book is for you."Instant Adobe Edge Inspect Starter" will guide you in getting started with Edge Inspect and will make testing on mobile devices a lot simpler and faster. The book is packed with a lot of examples and diagrams that will help you to test all your mobile web projects without any hassle.
Table of Contents (7 chapters)

So, what is Adobe Edge Inspect?

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.

Reasons for using Adobe Edge Inspect

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.

What you can do with Adobe Edge Inspect

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 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.

Some features of Edge Inspect

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.