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)

Quick start – pairing mobile devices with your computer


Now that you have installed all the necessary components for Adobe Edge Inspect, let us see how to pair and connect mobile devices with a computer. You can wirelessly pair multiple iOS and Android devices to your computer and start the remote inspection of web pages running on the mobile devices.

First, make sure that your mobile device/devices and your computer are all in the same wireless network. This is important for the connectivity of the devices and performance.

The following step-by-step instructions will guide you.

Step 1 – start the Edge Inspect helper application on your computer

Launch the Edge Inspect helper application that you have installed on your computer. For Windows, go to the Start menu and search for Adobe Edge Inspect. You can see Adobe Edge Inspect in your search results. Click on it to run it. The following screenshot should help you:

Similarly, for Mac users, search in the menu bar to look for Adobe Edge Inspect and then click on it to run it:

The Edge Inspect helper application (with In written on it) lives in the Taskbar Notification Area on a Windows machine as shown in the following screenshot:

On a Mac OS X machine the helper application resides in the top-right corner of the menu bar. The following screenshot shows Adobe Edge Inspect running on a Mac OS X computer:

After you have started the helper application on your computer you will notice that the Edge Inspect extension icon in your Google Chrome browser turns brown. This means that Adobe Edge Inspect is now activated on your computer.

Step 2 – start the Edge Inspect app on your mobile device

Look for the Edge Inspect client app with In written on it that you have installed on your mobile device and run it. It immediately autodiscovers the master computer via Bonjour and will list it under the available connections. The following screenshot shows the Edge Inspect app running on an iPhone and detecting my computer:

You can also manually add a computer by tapping on the "Add Connections" (+) button in the top-right corner, then entering the IP address, and then tapping on the Join button.The following screenshot shows it:

Step 3 – tap on the detected computer name to connect

Now, tap on the detected computer name (joseph-PC, in my case) on your mobile device and it will give you a passcode number. You will have to enter this number in the Edge Inspect browser extension in Chrome to authorize the connection. The following screenshot shows the passcode number on the iPhone:

Step 4 – enter the passcode number and authorize the connection

Click on the Edge Inspect extension icon in Google Chrome on your computer to open a pop-up dialog. You will see your mobile device listed there. You will also notice a textbox asking for the passcode number. Fill up the textbox with the passcode number that appears on your mobile device and then click on the Authorize button to pair. The following screenshot describes the step:

Step 5 – your mobile device is now paired

After you have authorized the connection, your mobile device is now paired with your computer. You can see your mobile device name on the list of paired devices.

After your mobile device is paired with your computer you can immediately see that whatever page is opened in Chrome on your computer, the same page is opened on your mobile device. There are some exceptions, though, such as a page that requires authentication or an SSL certificate acceptance, which we will talk about later in the Top 7 features you'll want to know about section. The Edge Inspect extension keeps track of the URL in your computer browser and sends it to the Edge Inspect app running on your mobile device. This URL is then opened in the Edge Inspect app.

Step 6 – pairing multiple devices

You can pair multiple iOS and Android devices to your liking with your computer. With the Edge Inspect helper application running in your computer follow step 2 through step 4 to connect and pair more mobile devices. The following screenshot shows an iPod Touch, an Android phone, an iPhone, and an Android tablet device paired to my computer:

So, in this section we have learnt how to pair mobile devices with the master computer. The next section describes in detail how to target a mobile device for remote inspection and debugging. There are several other features as well and I have that all in store for you in our next section.