Remotely Preview and test mobile web pages on actual devices with Adobe Edge Inspect

Exclusive offer: get 50% off this eBook here
Instant Adobe Edge Inspect Starter [Instant]

Instant Adobe Edge Inspect Starter [Instant] — Save 50%

Step-by-step, hands-on recipes to debug, test, and preview web applications on multiple mobile devices with Adobe Edge Inspect book and ebook.

$12.99    $6.50
by Joseph Khan | March 2013 | Web Development

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. Adobe Edge Inspect is a perfect tool for frontend 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.

With Adobe Edge Inspect you can pair multiple mobile devices with your computer and browse in Google Chrome on your computer and all the paired mobile devices stay in sync. This means that any page you open in Chrome either from your local HTTP web server (via localhost) or a production server, that same page is opened synchronously in all the paired mobile devices. After that you can target any mobile device for inspection and start remote testing, make changes to the HTML markup, CSS style rules, and JavaScript, and instantly see the changes in the targeted mobile devices.

In this article by Joseph Khan, author of Instant Adobe Edge Inspect Starter, we will talk on the most important feature of Adobe Edge Inspect, that is, how we can remotely preview, inspect, and debug a mobile web page. So let's get started.

(For more resources related to this topic, see here.)

Creating a sample mobile web application page for our testing purpose

Let's first check out a very simple demo application that we will set up for our test. Our demo application will be a very simple structured HTML page targeted for mobile browsers. The main purpose behind building it is to showcase the various inspection and debugging capabilities of Adobe Edge Inspect.

Now, let's get started by creating a directory named adobe_inspect_test inside your local web server's webroot directory. Since I have WAMP server installed on my Windows computer, I have created the directory inside the www folder (which is the webroot for WAMP server). Create a new empty HTML file named index.html inside the adobe_inspect_test directory. Fill it with the following code snippet:

<html> <head> <title>Simple demo</title> <meta name="viewport" content="width=device-width,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/> <style type='text/css' > html, body, p, div, br, input{ margin:0; padding:0; } html,body{ font-family:Helvetica; font-size:14px; font-weight:bold; color:#222; width:100%; height:100%; } #wrapper{ width:100%; height:100%; overflow:hidden; } .divStack{ padding:10px; margin:20px; text-align:center; } #div1{ background:#ABA73C; } #div2{ background:#606873; } input[type=button] { padding:5px; } <script type="text/javascript"> window.addEventListener('load',init,false); function init() { document.getElementById('btn1').addEventListener
('click',button1Clicked,false); document.getElementById('btn2').addEventListener
('click',button2Clicked,false); } function button1Clicked() { console.log('Button 1 Clicked'); } function button2Clicked() { console.log('Button 2 Clicked'); } </script> </style> </head> <body> <div id="wrapper"> <div id="div1" class="divStack"><p>First Div</p></div> <div id="div2" class="divStack"><p>Second Div</p></div> <div class="divStack"> <input id="btn1" type="button" value="Button1" /> <input id="btn2" type="button" value="Button2" /> </div> </div> </body> </html>

As you can make out we have two div elements (#div1 and #div2) and two buttons (#btn1 and #btn2). We will play around with the two div elements, make changes to their HTML markup and CSS styles when we start remote debugging. And then with our two buttons we will see how we can check JavaScript console log messages remotely.

Adobe Edge Inspect is compatible with Google Chrome only, so throughout our testing we will be running our demo application in Chrome. Let’s run the index.html page from our web server. This is how it looks as of now:

Now, let’s check if the two buttons are generating the console log messages. For that, right-click inside Chrome and select Inspect element. This will open up the Chrome web developer tools window. Click on the Console tab. Now click on the two buttons and you will see console messages based on the button clicked. The following screenshot shows it:

Everything seems to work fine and with that our demo application is ready to be tested in a mobile device with Adobe Edge Inspect.

With the demo application running in Chrome and your mobile devices paired to your computer , you will instantly see the same page opening in the Edge Inspect client app in all your mobile devices. The following image shows how the page looks in an iPhone paired to my computer.

Open the Edge Inspect web inspector window

Now that you can see our demo application in all your paired mobile devices we are ready to remotely inspect and debug on a targeted mobile device.

Click on the Edge Inspect extension icon in Chrome and select a device for inspection. I am selecting the iPhone from the list of paired devices. Now click on the Remote Inspection button to the right of the selected device name. The following image should help you:

This will open up the Edge Inspect web inspector window also known as the weinre (WEb INspector REmote) web inspector. This looks very similar to the Chrome web inspector window, doesn't it? So if you have experience with the Chrome web debugging tools then this should look familiar to you. The following screenshot shows it:

As you can see, by default the Remote tab opens up. The title bar says target not connected. So, although your mobile device is paired it is not yet ready for remote inspection. Under Devicess you can see your paired mobile device name with the URL of the page opened in it. Now, click on the device name to connect it. As soon as you do that, you will notice that it turns green. Congratulations! You are now ready for remote inspection as your mobile device is connected. The following screenshot shows it:

Changing HTML markup and viewing the results

Your target mobile device (the iPhone in my case) and the debug client (the Edge Inspect web inspector) are connected to the weinre debug server now and we are ready to make some changes to the HTML. Click on the Elements tab in the Edge Inspect web inspector on your computer and you will see the HTML markup of our demo application in it. It may take a few seconds to load since the communication is via Ajax over HTTP. Now, hover your mouse over any element and you would instantly see it being highlighted in your mobile device. Now let's make some changes to the HTML and see if it is reflected in the target mobile device. Let's change the text inside #div2 from Second Div to Second Div edited. The following screenshot shows the change made in #div2 in the Edge Inspect web inspector in my computer:

And magic! It is changed on the iPhone too. Cool, isn't it? The following screenshot shows the new text inside #div2. This is what remote debugging is all about. We are utilizing the power of Adobe Edge Inspect to overcome the limitations of pure debugging tools in mobile browsers. Instead make changes on your computer and see them directly in your handset.

Similarly you can make other markup changes such as removing an HTML element, changing element properties, and so on.

Changing CSS style rules

Now, let's make some CSS changes. Select an element in the Elements tab and the corresponding CSS styles are listed on the right. Now make changes to the style and the results will reflect on the mobile device as well. I have selected the First Div (#div1) element. Let's remove its padding. Uncheck the checkbox against padding and the 10 px padding is removed. The following screenshot shows the CSS change made in the Edge Inspect web inspector on my computer:

And the following image shows the result being reflected on the iPhone instantly:

Similarly, you can change other style rules such as width, height, padding, and margin and see the changes directly on your device.

Viewing console log messages

Click on the Console tab in the Edge Inspect web inspector to open it. Now click/tap on the buttons one by one on your mobile device. You will see that log messages are being printed on the console for the corresponding button clicked/tapped on the mobile device. This way you can debug JavaScript code remotely. Although Edge Inspect lacks JavaScript debugging using breakpoints (which would have been really handy had we been able to watch local and global variables, function arguments by pausing the execution and observing the state) but nevertheless, by using the console messages you can at least know that your JavaScript code is executing correctly to the point where the log is generated. So basic script debugging can be done. The following screenshot shows the console messages printed remotely from the paired iPhone:

Similarly you can target another device for remote inspection and see the changes directly in the device. With that we have covered how to remotely debug and test web applications running on a mobile device browser.

Summary

In this article, we have seen the most important feature of Adobe Edge Inspect, that is, how we can remotely preview, inspect, and debug a mobile web page. We first created a sample mobile web page, edited it using Adobe Edge Inspect, changed the HTML markup and CSS styles by remote testing, and saw the results as to how this special feature of Adobe Edge Inspect is utilized.

Resources for Article :


Further resources on this subject:


Instant Adobe Edge Inspect Starter [Instant] Step-by-step, hands-on recipes to debug, test, and preview web applications on multiple mobile devices with Adobe Edge Inspect book and ebook.
Published: February 2013
eBook Price: $12.99
See more
Select your format and quantity:

About the Author :


Joseph Khan

Joseph Khan is a Senior Web Developer at GoldSpot Media where he specializes in mobile web apps, rich media apps, and other RIAs (Rich Internet Applications). Before moving into mobile web development he was working with Adobe Flex, Action Script, and Flash technologies and developed data visualization and enterprise dashboard based applications for clients such as Cisco, The World Bank, AADI, and other global organizations. His liking towards mobile web development has been recent and he has been hooked ever since. He also likes Phonegap, SASS, Drupal, and Python.

He has a Bachelor's degree in Computer Science from N.I.T Silchar, India and has been working on the Web and related technologies for 6 years.

Besides his regular work he also likes to design cars and motorbikes, ride his Yamaha, and look for good food. Find out more about him and all his work at http://jbkflex.wordpress.com/.

Books From Packt


 Learning Modernizr
Learning Modernizr

Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3

jQuery Mobile Web Development Essentials
jQuery Mobile Web Development Essentials

Selenium Testing Tools Cookbook
Selenium Testing Tools Cookbook

Learning Adobe Edge Animate
Learning Adobe Edge Animate

HTML5 Mobile Development Cookbook
HTML5 Mobile Development Cookbook

WordPress Mobile Applications with PhoneGap
WordPress Mobile Applications with PhoneGap

Mobile Web Development
Mobile Web Development


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software