Mobile Responsive Testing and Debugging on Real Devices

nilesh
By nilesh
May 2, 2019
7 min Read
Share This Article
Mobile Responsive Testing and Debugging on Real Devices

Emulators vs Real Devices

Mobile Responsive Test across range of Mobile Devices and platforms is extremely important for superior User Experience. However, Mobile Responsive Test and debugging can get knotty, especially when there are issues like obfuscated HTML/CSS/javascript code, improperly implemented HTTPS, browser inconsistencies, page load performance and so on. So how do you overcome these issues? Using a Web Developer Tools or debugging extensions make debugging your web application easier. Here we’ll talk about the most popular one – Google Chrome Developer Tools.

The Google Chrome Developer Tools is a consolidated environment built into Google Chrome Browser. It is used for web authoring, debugging, monitoring, optimizing, and understanding web applications or websites. (Sourced from Google Chrome DevTools)

A responsive testing simulator provides a virtual environment where you can test the functionalities just like in a real device. You can also test websites on mobile devices online and test websites on different screen sizes. It is easy to perform responsive design testing across devices on a simulator.

Want to test your Mobile App?

Join pCloudy Platform!

Here are some of the key Chrome DevTools features

  • Inspect and edit the DOM and CSS of your website in real-time
  • Run code snippets from any page
  • Debug Obfuscated code
  • Set advanced breakpoints and debug JavaScript using graphical debugger
  • Troubleshoot Security issues
  • Analyze run-time and page performance to improve the speed of your app
  • Trace reflows and repaints as your app loads

The Chrome DevTools provides almost all the gears required to inspect, debug and monitor the performance of a Web App/mobile web. It also provides additional capabilities to simulate Mobile Devices to test and build mobile-first, responsive web sites. You can even debug web content on a real Android Device from a development machine. But, is it enough to perform Mobile responsive test on one or two devices?

Remote debugging using Chrome DevTools in integration with pCloudy’s Mobile Device Lab

Device fragmentation is a very real problem when testing Web apps on real devices, particularly for UI and functional tests. The number of devices with unique specifications and proprietary build variations has increased. At an advanced level, to perform Mobile Responsive Testing and to check performance of the Web App on real devices, you will need to experiment your site on various platforms, across a number of device form factors. pCloudy’s Mobile Device Lab offers complete integration with Chrome DevTools to test your apps on real devices. This integration allows you to test Web Apps on a myriad of android devices with different sizes and configurations.

Here’s how most App developers test their Web Apps

Inspect and live edit your site’s design and content

Test and edit your site in live mode by inspecting all the HTML and CSS in your page. In the Elements Panel, you can live-edit a DOM node by simply double-clicking a selected element and making changes.

mobile responsive test

You can even live-edit style property names and values in the Styles pane. Examine and edit box model parameters.

Live-Edit_Styles

It is also possible to edit the current element’s box model parameters by making changes to top, bottom, left, right values for the current element’s padding, border, and margin properties using the Computed pane.

Box_Parameters

Remote Debugging on real devices to fix errors in the code

Debugging Obfuscated Code: Make your code readable and easy to debug even after you’ve combined, minified or compiled it. You can easily change the formatting of your minimized code by clicking on { }.

Debug-Obfuscated

Test and optimize the performance of the Web App

The Network Panel allows you to see how your page renders, and time taken to render from start to end. To do this click into the “Network” panel, click on the camera icon and refresh the page on the device.

Network

The Timeline panel helps you to record and analyze all the activities in your application as it runs. It’s the best place to start investigating perceived performance issues in your application.

To make a recording of a page load, open the Timeline panel, open the page that you want to record, and then reload the page. The Timeline panel automatically records the page reload. You can also record page interactions on the page and view the performance details through the recorded timeline.

Here are some more details you can view using the Record Timeline

  • Record the Timeline to analyze every event that occurred after a page load or a user interaction
  • View FPS, CPU, and network requests in the Overview pane
  • Click on an event within the Flame Chart to view details about it
  • Zoom in on a section of a recording to make analysis easier

Timeline

There are some things to be kept in mind while performing responsive testing:

Device selection
It is better to ask your business analyst or your manager which devices we need to perform the testing. Creating a device matrix is a tedious job due to device fragmentation with frequent browser and OS updates. Even if you spend a lot of time on making a strategy for the combination of devices, that may not get approved by the product manager or scrum master.

Automation testing and Manual testing
It’s better to use both automated and manual approach to perform testing. Based on the type of testing you can share the effort like 70% automated and 30% manual. It is obvious that sometimes automated testing will miss something that a human eye can see. A tool clicking on a link or zooming in and out is different from doing it manually.

Emulators, simulators and real devices
If you wish to test your app on many verities of devices then you can also opt for emulators and simulators. It won’t be possible for you to set up a device lab as it will cost a lot. So you can use a real device that is popular in the market and emulators for the devices that are not that popular.

Prioritize
Mobile app testing including mobile responsive testing needs to be perfectly prioritized as testing is a time-consuming process. Responsive testing priority should be discussed with the BA and the product manager well in advance and take some suggestions from them. The issue is that there are a plethora of devices and while prioritizing, the most popular devices will be used first for testing.

Conclusion

“Using the right tools for the right job” is an old aphorism that applies to all domains including Software Development. As we’ve seen, Chrome DevTools has several features that help you develop better, debug faster, and measure efficiently the performance of your website or application. An ideal choice for you for Mobile Responsive Testing.

The features discussed in this blog are some of the most common ones used by developers, designers, and testers to write, debug, monitor and optimize Websites and Web Apps. Using these features in integration with Mobile Device Lab like pCloudy can transform the entire process of creating, testing and launching Websites and Web Apps.

Want to test your Mobile App?

Join pCloudy Platform!

For more information check out this video:


Related Articles:

  • Beginners Guide to Mobile Web Debugging on Real Devices Using Chrome DevTools
  • Mobile Testing Infrastructure – Emulators vs Real Devices
  • Problems With Online Android Emulators and How to Solve it?
  • Tips to Consider While Creating a World Class Mobile Testing Lab
  • Functional Testing Vs Non-Functional Testing
  • nilesh
    nilesh

    Nilesh is the vice-president at pCloudy and has around 16 years of experience in Product development and Testing. He has worked primarily in the mobile application testing and mobile device testing domain with companies like Sasken, Motorola, Nokia, and Accenture.

    Related Articles

    September 20, 2017
    Explore Full Power of pCloudy Platform – Improve Quality, Speed and Efficiency

    Explore Full Power of pCloudy   pCloudy understands that businesses need their apps to be rolled out faster than before, without bugs, crashes, functionality issues, UI glitches, memory drainage and well, everything wrong with every app you uninstalled on your…

    Learn More Arrow

    July 25, 2017
    Mobile App Testing Tools to Improve App Quality - pCloudy Tutorial

    Mobile App Testing Tools to Improve App Quality   Mobile is the key to the digital world in today’s era. The rise of Mobile Internet has ensured that we all are going to make most of our digital decisions on…

    Learn More Arrow

    May 9, 2017
    A Sneak Peek of Our Device Data Center

    pCloudy's Data Center   Ever had apps on your phone which suddenly crashed it and you couldn’t figure it out? In today’s age, If you have a smartphone that needs to get you through most of the day, be it…

    Learn More Arrow

    A Sneak Peek of Our Device Data Center

    Suyash Dubey
    By Suyash Dubey
    May 9, 2017
    3 min Read
    Share This Article
    A Sneak Peek of Our Device Data Center

    pCloudy’s Data Center

    Ever had apps on your phone which suddenly crashed it and you couldn’t figure it out?

    In today’s age, If you have a smartphone that needs to get you through most of the day, be it work or play, you must have experienced frustrating bugs on that app that is either slowing down the phone or stops you from using it when you need the most. So you uninstall it and be done with it. Try asking any app developer or tester what it is like to test usability of the app in thousands of devices across screens, operating systems and the carriers.

    This is where pCloudy comes-in. A one stop solution for Developers and Testers to certify their App across variety of devices.

    How does pCloudy work?

    pCloudy has found an incredibly simple way of allowing users to remotely test their apps on different real and physical devices by using just a modern web browser. Alternatively, users can access the devices directly from their IDEs like (Android + Eclipse studio).

    Device Data Center

    Behind the scenes:

    Use of Physical devices: Mobile App Testing is most effectively when done on a real physical device. That’s the reason, pCloudy currently has 500 + Android and iOS device (real device, no emulators) across various manufacturers and versions.

    Data-center-2[A Device Rack in the Data center which contains pCloudy Hardware and set of devices]

    Kind of hardware involved: pCloudy has a customized hardware setup, which runs the software to allow communication with real mobile devices. All the mobile devices are connected to the hardware using USB cables.

    Network Setup for Devices: All the devices have a Wi-Fi connection. To ensure uninterrupted connectivity to the devices, all the racks are installed with dedicated Wi-Fi controllers and Wi-Fi access points. The Wi-Fi access points are deigned for interference mitigation and Noise (SINR) improvement. Besides, many of the devices also have real SIM cards.

    pCloudy Device Data Center[Data Center: All the above is located in a secure, 24×7 operated data center]

    When it comes to certification of Apps, one of the biggest concern for Users while using a solution like pCloudy is security and safety of their Data.

    Why we decided Data Security was Critical?

    It was important for our customers to feel safe about their Apps and data that they upload on pCloudy servers. Many a time these are not-yet-released app and related data. Today pCloudy is working with Global enterprises who are extremely concerned about safety of their Data.

    Security of Data Center: A major component of the entire pCloudy offering is the data centers where physical mobile devices are connected. These devices are then made accessible through cloud via the web browser to the customers. pCloudy has hosted their cloud in a data center which meets all the global standards, including compliance with SSAE­16 (SOC­2) and ISO 270001 standard. pCloudy has 99.982% uptime commitment on the DC infrastructure which is measured quarterly, a failover redundancy mode for equipment’s setup and everything that does not get in the way of a creating an uninterruptible, stable working mobile network environment for the apps, round the clock, 24X7.

    Secured Cloud Drive: Data uploaded by user (Apps/Test Data) is Stored in secured folder on our server in DC. User space is protected by username and password. Data is further protected by a layer of encryption. No access to user data by pCloudy admin.

    Device Clean up: Device gets cleaned up automatically after each use. As soon user releases a device, user installed Apps get uninstalled, data uploaded get deleted and device gets powered cycle.

    Suyash Dubey
    Suyash Dubey

    Suyash is a content strategist at pCloudy. He is a frequent contributor to the world's leading mobile technology blogs and tech forums. In his spare time, you will find him reading detective novels, watching a documentary or exploring a new destination.

    Related Articles

    April 19, 2020
    What’s New In pCloudy 5.6?

    pCloudy is committed to delivering the best solutions in mobile app testing and therefore we come up with product updates at regular intervals. This time we are thrilled to announce the release of pCloudy 5.6 with exciting new features to…

    Learn More Arrow

    May 2, 2019
    Mobile Responsive Testing and Debugging on Real Devices

    Emulators vs Real Devices   Mobile Responsive Test across range of Mobile Devices and platforms is extremely important for superior User Experience. However, Mobile Responsive Test and debugging can get knotty, especially when there are issues like obfuscated HTML/CSS/javascript code,…

    Learn More Arrow

    April 24, 2019
    5 Ways AI is Changing Test Automation

    Software testing has evolved a lot since the time when the waterfall model was used. All the work was done in a sequential manner and only after the development phase was complete the testers used to test the product. Testers…

    Learn More Arrow

    We Are Committed to Keep You Ahead of Others: pCloudy Is Fastest to Add Samsung S8 and S8 Plus Devices

    Avinash
    By Avinash
    April 24, 2017
    1 min Read
    Share This Article
    We Are Committed to Keep You Ahead of Others: pCloudy Is Fastest to Add Samsung S8 and S8 Plus Devices

    Samsung S8 and S8 Plus are Available

    samsung-gala-s8samsung-gala-s8-plus

    start-using-it-now

    Avinash
    Avinash

    Avinash Tiwari is a thought leader, a recognized keynote speaker, and the co-founder of pCloudy.com. He has 15+ experience in Product development and Testing. He brings with him a passion for emerging technology and quick adoption, both of which have solidified his reputation as a leader in the mobile app testing field.

    Related Articles

    May 2, 2019
    Mobile Responsive Testing and Debugging on Real Devices

    Emulators vs Real Devices   Mobile Responsive Test across range of Mobile Devices and platforms is extremely important for superior User Experience. However, Mobile Responsive Test and debugging can get knotty, especially when there are issues like obfuscated HTML/CSS/javascript code,…

    Learn More Arrow

    October 13, 2017
    Problems With Online Android Emulators and How to Solve it?

    Online Android Emulator to Test Apps Android now occupies the number one place in the world Smartphone arena with a market share of 87% at the end of 2016 that means 9 out of 10 Smartphones in the world run…

    Learn More Arrow

    June 23, 2017
    Testing The Battery Drain For Android App

    Android App Testing   If you are anything like me, you’d agree that the armor of present day mobile phone technology has a few chinks on it. Nothing is worse than applications draining the battery resources of your mobile device…

    Learn More Arrow

    New Devices Added Recently

    Avinash
    By Avinash
    October 26, 2016
    1 min Read
    Share This Article
    New Devices Added Recently

    New Devices Added

    iphone-7
    iPhone 7
    amazon-fire
    Amazon Fire
    lenovo-s920
    Lenovo S920
    coolpad-dazen-1
    Coolpad Dazen 1
    huawei-p8-lite
    Huawei P8 Lite
    gionee-f103
    Gionee F103
    oppo-r7
    Oppo R7
    Nextbit-robit
    Nextbit Robit
    vivo-y31l
    Vivo Y31l
    Avinash
    Avinash

    Avinash Tiwari is a thought leader, a recognized keynote speaker, and the co-founder of pCloudy.com. He has 15+ experience in Product development and Testing. He brings with him a passion for emerging technology and quick adoption, both of which have solidified his reputation as a leader in the mobile app testing field.

    Related Articles

    May 2, 2019
    Mobile Responsive Testing and Debugging on Real Devices

    Emulators vs Real Devices   Mobile Responsive Test across range of Mobile Devices and platforms is extremely important for superior User Experience. However, Mobile Responsive Test and debugging can get knotty, especially when there are issues like obfuscated HTML/CSS/javascript code,…

    Learn More Arrow

    September 4, 2018
    New Devices Added Recently on Our Platform

    New Devices Added Recently     Start using now

    Learn More Arrow

    New Devices Added on Our Platform

    Avinash
    By Avinash
    September 29, 2016
    1 min Read
    Share This Article
    New Devices Added on Our Platform
    htc_desire_630
    HTC Desire 630
    htc-desire-628
    HTC Desire 628
    htc-desire-830
    HTC Desire 830
    lenovo-k5-note
    Lenovo K5 Note
    lenovo_k4_note
    Lenovo K4 Note
    xperia-c3-dual
    Xperia C3 Dual
    micromax_unite_plus
    Micromax Unite Plus
    micromax-canvas-juice
    Micromax Canvas Juice
    micromax-canvas-lite
    Micromax Canvas Lite
    meizu-note2
    Meizu Note 2
    zopo-color-c
    Zopo Color C
    itel-selfie-pro
    Itel Selfie Pro
    honor_5c
    Honor 5C
    intex_aqua-ace
    Intex Aqua Ace
    cobalt-iball
    iBall Cobalt
    infocus-460
    Infocus 460
    canvas_unite_4_pro
    Canvas Unite 4 Pro
    Avinash
    Avinash

    Avinash Tiwari is a thought leader, a recognized keynote speaker, and the co-founder of pCloudy.com. He has 15+ experience in Product development and Testing. He brings with him a passion for emerging technology and quick adoption, both of which have solidified his reputation as a leader in the mobile app testing field.

    Related Articles

    May 2, 2019
    Mobile Responsive Testing and Debugging on Real Devices

    Emulators vs Real Devices   Mobile Responsive Test across range of Mobile Devices and platforms is extremely important for superior User Experience. However, Mobile Responsive Test and debugging can get knotty, especially when there are issues like obfuscated HTML/CSS/javascript code,…

    Learn More Arrow

    September 4, 2018
    New Devices Added Recently on Our Platform

    New Devices Added Recently     Start using now

    Learn More Arrow

    New Devices Added Recently

    Avinash
    By Avinash
    September 8, 2016
    1 min Read
    Share This Article
    New Devices Added Recently

    New Devices Added Recently

    apple-iphone-se
    iPhone SE
    htc-desire-616
    HTC Desire 616
    htc-one-mini
    HTC One Mini
    htc-butterfly-s
    HTC Butterfly S
    lenovo-vibe-c
    Lenovo Vibe C
    asus-zenfone-2
    Asus Zenfone 2
    lg-optimus-g2
    LG Optimus G2
    samsung-galaxy-mega
    Samsung Galaxy Mega
    sony-xperia-c
    Sony Xperia C
    xolo-era-4k
    Xolo Era 4K
    xolo-era-x
    Xolo Era X
    asus-zenpad
    Asus Zenpad
    htc-526
    HTC 526
    htc-one-m8
    HTC One M8
    moto-g-turbo
    Moto G Turbo
    moto-x
    Moto X
    oppo-mirror-3
    Oppo Mirror 3
    samsung_e5
    Samsung E5
    samsung-galaxy-j7
    Samsung Galaxy J7
    samsung-galaxy-note-3
    Samsung Galaxy Note 3
    samsung-galaxy-s7
    Samsung Galaxy S7
    samsung-galaxy-s-duos
    Samsung Galaxy S Duos
    samsung-galaxy-star-pro
    Samsung Galaxy Start Pro
    sony_xperia_m
    Sony Xperia M
    Avinash
    Avinash

    Avinash Tiwari is a thought leader, a recognized keynote speaker, and the co-founder of pCloudy.com. He has 15+ experience in Product development and Testing. He brings with him a passion for emerging technology and quick adoption, both of which have solidified his reputation as a leader in the mobile app testing field.

    Related Articles

    May 2, 2019
    Mobile Responsive Testing and Debugging on Real Devices

    Emulators vs Real Devices   Mobile Responsive Test across range of Mobile Devices and platforms is extremely important for superior User Experience. However, Mobile Responsive Test and debugging can get knotty, especially when there are issues like obfuscated HTML/CSS/javascript code,…

    Learn More Arrow

    September 4, 2018
    New Devices Added Recently on Our Platform

    New Devices Added Recently     Start using now

    Learn More Arrow

    Does the OEM’s Customization Impacts Your App Quality?

    shivani
    By shivani
    April 16, 2015
    5 min Read
    Share This Article
    Does the OEM’s Customization Impacts Your App Quality?

    OEM’s Customization

    Google developed Android to be an open source platform, so by it’s nature it can be customized.

    So if we talk about mobile OEM’s [original equipment manufacturer] like Samsung, HTC, Motorola or LG they just can’t leave Android alone. They customize the Android version for their set of devices. Samsung’s Touch Wiz, Motorola’s Moto Blur, HTC’s Sense are some of the examples.

    What is Customization?

    When Google releases the latest version of Android, raw and naked to the world, these manufacturers customize that software for their devices. The OS alteration—the skin—changes the look of the software and how it performs. The diagram below explains the process.

    Skins

    Why these OEM’s customize the original android?

    Each of the manufacturer have their own though on customization but one thing is common between them is customization enhance the user experience.

    Let’s see some of the example of customization by different manufacturers

    Lock Screen

    lockscreen-300x261

    Samsung’s lock screen solution does not differ greatly from pure Android 4.2. The only difference is the unlocking process: with Samsung’s lock screen, you can simply swipe the screen to unlock while stock Android requires the user to flick a ring away from the lock icon.

    Home Screen

    home-screen-300x275

    Touch wiz’s home screen’s parallels with Android are clearly visible here. at the bottom there is a dock with re-programmable app shortcuts and the space between the status bar and the dock can be used for widgets or apps. Samsung also allows users to completely remove the Google search bar, which is impossible on the Nexus 4 unless you download an alternative launcher.

    Using pinch to zoom, you reach Samsung’s home screen index. Here you can delete everything on your home screen, re-arrange it or add new pages if you need more space. Stock Android has no options like this; again, you’d have to download an alternative launcher.

    Notification Bar

    notfication-bar-300x261

    Touchwiz’s notification bar, AKA Quick Settings, allows you to change your ringtone, or easily switch off Bluetooth. Directly below, you can find a slider to change your phone’s brightness, and under that you can see your notifications. The top bar displays all possible Quick Settings, which you can add to or delete quite easily.

    Stock Android 4.2’s quick settings are accessible by clicking a button on the top right of the notification tray, allowing for more space for messages to be shown.

    Settings

    settings-300x261

    Samsung has separated the settings function into multiple taps to help users find their way more easily. But you can’t simply swipe from tab to tab, which is super annoying and contradicts Google’s own developer guidelines set forth all the way back with the introduction of Android Ice Cream Sandwich. In stock Android, there are several clear categories but no tabs, which I actually like better.

    App Drawer

    Samsung’s App Drawer can be used as a genuine, personalized app database. The default view can be changed to three options: customizable gird, alphabetical gird, or alphabetical list. In addition, apps can be sorted into folders and can be disabled or uninstalled directly from the App Drawer.

    appdrawer-300x255

    Touch wiz provides some more sorting and organizing options in the App Drawer.

    The Google Now launcher only displays apps in an alphabetical grid with no other options for sorting being available. If you want to search for apps, this is done by the Google Search box on the home screen. As well, apps can be uninstalled from the App Drawer by long holding the app in questions and then dragging them to the top of the screen.

    Recently Opened Apps

    When you open up the Recently Opened Apps in Touch wiz, you have the option to see your RAM usage and also a Collapse All link that will close all open programs. In stock Android, unfortunately, you have to pick and choose each and every app that you want to close by swiping it to the side.

    recently-opened-app-300x255

    On stock Android, you’ll need to close each app individually. Touchwiz has a button that will close all open apps at once.

    In nutshell Apart from Google manufactured devices nobody is using Stock android. So next time when you start creating a strategy about the coverage of Mobile platform think about OEM’s Customization.

    As you can see, UI Skins are a significant source of the fragmentation that affects developers.

    In addition to UI layers, Drivers also cause major problems, many related to graphics. Certain chipset manufacturers have done an especially bad job at updating their graphics drivers, which makes the colors in apps, games and any graphic content inconsistent across phones. Developers might encounter entirely different color schemes on various Android devices, none close to what they intended.

    TIPS AND TAKEAWAYS

    1. The most common misconception is that Nexus devices are the best for testing. Those devices typically have the latest OS version and little to no OEM customization.
    2. Pay attention to carrier- and operator-branded devices as well. Some of them implement Android totally differently, regardless of the name of the device or brand.


    Related Articles:

  • Mobile App Testing Tools to Improve App Quality – pCloudy Tutorial
  • >Explore Full Power of pCloudy Platform – Improve Quality, Speed and Efficiency
  • How To Achieve Scalability,Quality And Speed With Appium
  • 17 Best Tips To Write Effective Test Cases
  • Continuous Integration with Jenkins
  • shivani
    shivani

    She is a Product Marketer with over 9 years of diversified experience across content, branding, and product marketing. Her experience ranges from global brands to nimble startups. She is a custodian of Brand & Content, telling stories about the brand that delights customers and provides compelling business value.

    Related Articles

    May 2, 2019
    Mobile Responsive Testing and Debugging on Real Devices

    Emulators vs Real Devices   Mobile Responsive Test across range of Mobile Devices and platforms is extremely important for superior User Experience. However, Mobile Responsive Test and debugging can get knotty, especially when there are issues like obfuscated HTML/CSS/javascript code,…

    Learn More Arrow

    May 9, 2017
    A Sneak Peek of Our Device Data Center

    pCloudy's Data Center   Ever had apps on your phone which suddenly crashed it and you couldn’t figure it out? In today’s age, If you have a smartphone that needs to get you through most of the day, be it…

    Learn More Arrow

    Experience pCloudy Today

    Tickmark No Credit Card Required
    Tickmark Exceptional Security

    Copyright All Rights Reserved © 2020