(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:
- Adapting to User Devices Using Mobile Web Technology [Article]
- Getting Started on UDK with iOS [Article]
- Getting Started with Internet Explorer Mobile [Article]
