New Devices Added Recently on Our Platform

Avinash
By Avinash
October 19, 2016
1 min Read
Share This Article
New Devices Added Recently on Our Platform

Latest Devices

htc-828
HTC 828
htc-desire-10-lifestyle
HTC Desire 10 Life Style
htc-desire-820s
HTC Desire 820S
htc-desire-825
HTC Desire 825
htc-one-x9
HTC One X9
itel-it-1512
ITEL IT 1512
lava-x81
Lava X81
lenovo-vibe-p1-turbo
Lenovo Vibe P1 Turbo
micromax-canvas-6
Micromax Canvas 6
micromax-canvas-fire-4g
Micromax Canvas Fire 4G
bleu-wi-208-8gb-black
Bleu WI 208
blu-studio-one-s0110ee
Blu Studio One S0110EE
coolpad-note-3
Coolpad Note 3
panasonic-eluga-icon-slate
Panasonic Eluga Icon Slate
phicomm-c630
Phicomm C630
samsung-galaxy-j2
Samsung Galaxy J2
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

March 28, 2019
Challenges in Mobile App Testing

[xyz-ihs snippet="quickLinks-mobile-app-testing"]   Today, there are many smartphone users in the world and so is the popularity of mobile apps. In order to be competent enough, mobile apps have to be unique and should provide the best user experience to…

Learn More Arrow

September 4, 2018
New Devices Added Recently on Our Platform

New Devices Added Recently     Start using now

Learn More Arrow

July 27, 2018
pCloudy 5.1 - July Release Update and Full Speed Ahead in the Third Quarter

pCloudy 5.1 At each step of our journey, we aim to make your app testing robust and simpler. That's why your feedback and requests are so important for us. We tried to incorporate them into a release structure again that…

Learn More Arrow

Beginners Guide to Mobile Web Debugging on Real Devices Using Chrome DevTools

Avinash
By Avinash
August 17, 2016
5 min Read
Share This Article
Beginners Guide to Mobile Web Debugging on Real Devices Using Chrome DevTools

Chrome Developer Tools

Introduction

Testing a Mobile Web App 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. Moreover, few things like can be extremely agonizing while striving to support as wide a range of mobile devices as possible. 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 – the open source 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)

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 test your Web App on just 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 fully test your Web App’s responsiveness and performance 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.

Chrome Developer Tools

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 the 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.

Chrome Dev Tools

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

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 Developer Tools has several features that helps you develop better, debug faster, and measure efficiently the performance of your website or application. The features discussed here 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 transmogrify the entire process of creating, testing and launching Websites and Web Apps.

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 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

October 19, 2016
New Devices Added Recently on Our Platform

Latest Devices   HTC 828 HTC Desire 10 Life Style HTC Desire 820S HTC Desire 825 HTC One X9 ITEL IT 1512 Lava X81 Lenovo Vibe P1 Turbo Micromax Canvas 6 Micromax Canvas Fire 4G Bleu WI 208 Blu Studio…

Learn More Arrow

Experience pCloudy Today

Tickmark No Credit Card Required
Tickmark Exceptional Security

Copyright All Rights Reserved © 2020