Lighthouse with Chrome on a remote Android device

Lighthouse with Chrome on a remote Android device

Ensuring the optimal performance of applications is critical in determining user satisfaction and engagement. Developers, testers, and QA teams look out for appropriate tools that suit their needs precisely and deliver the desired outcomes. One of the tools gaining traction in recent days is Lighthouse, an open-source tool that serves as a powerful ally in improving the quality of web pages.

Lighthouse enables developers to measure the performance, accessibility, best practices, and SEO of web pages. It provides comprehensive insights and recommendations to improve the overall quality and user experience of a website. Lighthouse is built into the Chrome DevTools and can be used locally or remotely to audit web pages.

How can developers leverage Lighthouse for remote debugging?

Developers and QA teams can simplify and streamline Android remote debugging with Lighthouse and ensure the optimized performance of web apps.

Developers, testers, and QA teams use Lighthouse for remote debugging in the following ways:

1. Remote Debugging Protocol: Lighthouse utilizes the Remote Debugging Protocol (RDP) provided by Chrome to connect to remote Android devices and perform debugging tasks. This simplifies the workflow of using Lighthouse in Chrome for remote debugging in addition to several platforms that help access remote devices for end-to-end debugging of web applications.

2. Chrome DevTools integration: Lighthouse is integrated into DevTools of Chrome for remote debugging, enabling developers to access the DevTools remotely and use Lighthouse for performance analysis and optimization of web applications on remote Android devices.

3. Remote testing: Developers can use Lighthouse to test web application performance on remote Android devices by accessing the device's browser through DevTools and running Lighthouse audits remotely.

4. Command Line Interface (CLI): Lighthouse provides a CLI for automating remote debugging and testing tasks, allowing developers to script commands for audits, performance data collection, and report generation on remote Android devices.

Leveraging Lighthouse in conjunction with HeadSpin on remote Android devices

HeadSpin offers a robust infrastructure for testing mobile applications and websites. With its extensive device cloud, it enables testing across various real-world scenarios and network conditions. Combining these two tools help streamline remote debugging on Android; testers and developers can gain a holistic view of website performance and make informed optimization decisions.

HeadSpin and Lighthouse are two powerful tools that can greatly assist in Android debugging by providing critical insights into the app's performance and behavior.

Here's how HeadSpin and Lighthouse help in Android debugging:

● Remote device access and extensive performance analysis

Developers can perform remote debugging of Android devices with Google Lighthouse and HeadSpin. HeadSpin allows you to access real Android devices remotely from across different geographical locations, enabling you to test and debug your application on these devices without physically possessing them. The Platform and its data science capabilities for monitoring performance metrics integrate with Lighthouse to perform audits on various aspects like performance, accessibility, SEO, and best practices, providing a detailed report with actionable recommendations.

● Real-time user experience and performance assessment

HeadSpin, integrated with Lighthouse, offers a comprehensive solution for real-time user experience monitoring and performance analysis. With HeadSpin, you can track and analyze the performance of your application from the end-user perspective, capturing user interactions, session data, and user flows. Additionally, Lighthouse, integrated into Chrome's DevTools, provides detailed performance analysis, including audits on performance, accessibility, SEO, and best practices. By combining these capabilities, you gain a holistic view of your application's performance, enabling you to identify issues, optimize user experience, and make data-driven improvements.

A step-by-step guide for using Lighthouse with HeadSpin

Prerequisite

Make sure Chrome is installed on the device.

Make sure you have HS CLI installed.
The first thing to do is to install the HS CLI tool that is available on the Platform. It is available for MAC, Linux, and Windows. The steps to download the tool are below.
Get the latest version of the HS tunnel installed by following the steps below:

1) Click on your name and Org name, which are on the top right of the UI.

Dashboard-Home

2) Select "Settings."

Settings button

3) Go to the bottom, and you can see the link to download the CLI tool. Download the tool for your respective machine and install the tool.

HeadSpin CLI downloads

4) To check if you have the latest CLI installed, type "hs -V" in your terminal.

Make sure Lighthouse and adb are set up on the system.

You can use the link to get more information.

Steps

● HS connects the device

HS connect is the capability that HeadSpin provides to connect our remote devices to your laptop/desktop. HS connect command can be found in the UI as shown below:

remote debug

Once done, you will get a prompt that the device is connected as below:

hs connect command

This will allow you to run adb commands on the connected device. Once connected, follow the below steps:

● Forward the adb port for Lighthouse by using the command below:


adb -s <device_id> forward tcp:9222 localabstract:chrome_devtools_remote

● If you are using multiple devices, please increase the port and use the correct device_id

● Device_id is obtained as a response to HS connect, for example, the above device_id after running the HS command is “Galaxy-S20-FE-SM-G780F-RZ8NC0VQ79X.dev-gb-lhr-0-proxy-32-lin.hs.headspin.io:55041

● Now you can run the Lighthouse command


lighthouse --port=9222 --screenEmulation.disabled --throttling.cpuSlowdownMultiplier=1 --throttling-method=provided --output=json,html --output-path=<file_path> https://www.example.com
  • Where <file_path> is the path to store the result (in json and html)

● HS disconnects the device once the test is done

  • hs disconnect <device_id>

Bottom line

By following these steps, you can effectively debug your web applications on remote Android devices using HeadSpin and leverage the power of Lighthouse for performance analysis. This combination enables you to identify and resolve issues, optimize your applications, and enhance the overall user experience.