Skip to main content

Inspect elements of Mobile Web Application

The way your web content behaves on mobile can be dramatically different from the desktop experience. Remote debugging with Chrome DevTools lets you debug live content on your Android device.
remote-debug-banner
In this chapter we will learn how to use the Chrome DevTools to debug the site live on the Android device and how to Inspect elements of Mobile Web Application.
Chrome DevTools helps us in following:
  • Debugging websites in browser tabs.
  • Debugging WebViews in native Android apps.
  • Screencasting live to your development machine from your Android device.

Requirements

To begin with Chrome DevTools, you need:
  • Chrome 32 or later installed on your development machine.
  • A USB cable to connect your Android device.
  • For browser debugging: Android 4.0+ and Chrome for Android on the device
Note: Remote debugging requires your version of desktop Chrome to be newer than the version of Chrome for Android on your device. For best results, use Chrome Canary (Mac/Windows).

Prerequisites

  1. Setting up the Android device
  2. Connect the Device with machine

Once the device is connected with the machine, do the following steps:
1) On the desktop Chrome browser, navigate to chrome://inspect and confirm that Discover USB devices is checked.
Inspecting_WebElement_1
Note: You can also get to chrome://inspect by selecting Chrome menu > More tools > Inspect Devices.

Inspecting_WebElement_32
Note: There can be an alert prompts you to allow USB debugging, just select OK to move forward.

2) Now open a Chrome browser on the device and after that refresh the Chrome window on the machine. This will display the entry of the opened Chrome browser on the device. Type www.toolsqa.com in the space given and click on Open.
Inspecting_WebElement_2

3) Notice the website is opened in the device now.
Inspecting_WebElement_31

4) Same is displayed on the Chrome browser on the machine as well. Now click on the inspect link.
Inspecting_WebElement_3
5) Inspect, will allow to investigate the HTML elements of the website opened on the connected device. A new instance of Chrome DevTools will launch on the computer. From this instance, you can interact with the selected browser tab on your device in real time.
Inspecting_WebElement_4
Note: When mouse over an element in the Elements panel, DevTools highlights the element on your device. You can also click the Inspect Element icon in DevTools and tap your device screen. DevTools highlights the tapped element in theElements panel.

How to do Screencasting in Chrome

I know its hard to shift your attention between screens but Chrome Screencast feature displays your device’s screen right alongside DevTools on the machine. But not just this, interaction with the content on the attached device from the screencast is also a cool feature.

Start a screencast session

To start screencasting, click the Screencast screencast icon icon in the upper right corner of the remote debugging DevTools window.
Inspecting_WebElement_5
The Screencast panel opens on the left and displays a live view of your device’s screen.
Inspecting_WebElement_6

Interact with your device using the screencast

When you interact with the screencast, clicks are translated into taps, firing proper touch events on the device. Keystrokes from your computer are sent to the device, so you can avoid typing with your thumbs.
Other DevTools work with the screencast too. For example, to inspect an element, click the Inspect Element inspect element icon icon and then click inside the screencast.

Labels:

Comments

Post a Comment

Popular posts from this blog

JMeter Exceeded Maximum Number of Redirects Error Solution

While running performance test, JMeter allows maximum 5 redirects by default. However, if your system demands more than 5 redirects, it may result in JMeter exceeded maximum number of redirects error. In this post, we have listed down steps to overcome this error. Actual error in JMeter: Response code: “Non HTTP response code: java.io.IOException” Response message: “Non HTTP response message: Exceeded maximum number of redirects: 5” This error is noticed because  JMeter  allows maximum 5 redirects by default and your system may be using more than 5 redirects. You need to increase this count to more than 5 in jmeter.properties file. Follow below steps to achieve this. Navigate to /bin directory of your JMeter installation. Locate jmeter.properties file and open it in any editor. Search for “httpsampler.max_redirects” property in opened file. Uncomment the above property by removing # before it. Change to value to more than 5 Eg. 20. Save the file and restart JMet...
Post a Comment
Read more

SSO with SAML login scenario in JMeter

SAML(Security Assertion Markup Language) is increasingly being used to perform single sign-on(SSO) operations. As WikiPedia puts it, SAML is an XML-based open standard data format for exchanging authentication and authorization data between parties, in particular, between an identity provider and a service provider. With the rise in use of SAML in web applications, we may need to handle this in JMeter. This step-by-step tutorial shows SAML JMeter scenario to perform login operation. First request from JMeter is a GET request to fetch Login page. We need to fetch two values ‘SAMLRequest’ and ‘RelayState’ from the Login page response data. We can do this by using  Regular Expression Extractor . These two values need to be sent in POST request to service provider. Refer below image to see how to do this. We will get an HTML login page as a response to the request sent in 1st step. We need to fetch values of some hidden elements to pass it in the next request. We...
Post a Comment
Read more

VBScript Code - Function to convert CSV file into excel and viceversa in QTP using VBScript

We at times are required to convert excel files into csv to read as flat files and sometime require to convert a csv file into excel file to use excel features on the data.   Below function shows how to convert an csv file into excel file and vice versa. We can also convert to other formats based on constants Here constant value 23 is used to create a csv file and constant -4143 to save a file as xls file. Once the destination file is created, we can delete the source file as shown below.  In case of any issue in understanding the code, please add in comment section Call func_ConversionCSVExcel("E:\Test.csv", "E:\Test_converted.xls", "csvtoexcel") Public Function func_ConversionCSVExcel(strSrcFile, strDestFile, Conversion) on error resume next Set objExcel = CreateObject("Excel.application") set objExcelBook = objExcel.Workbooks.Open(strSrcFile) objExcel.application.visible=false objExcel.application.displayalerts=...
Post a Comment
Read more