Introducing PageSpy: An Open‑Source Frontend Remote Debugging Tool

Background

Recently I have been working on an H5 feature embedded in the company app, collaborating across cities A and B. To simplify debugging, we usually instantiate vConsole, hoping testers can screenshot its output when issues arise.

Pain Points

In practice, communication still consumes a lot of time. Simple issues are easy to describe, but medium‑level problems require testers to capture vConsole screenshots, which often miss key information, leading to multiple clarification rounds. Complex issues may need remote video sessions to view the device.

All these steps increase the time cost of handling runtime errors that involve project execution data.

Root Cause

Physical distance forces testers to act as intermediaries, relaying error information to developers, preventing direct interaction with the bug.

Proposed Solution

The solution is to wrap native browser APIs, collect runtime call parameters, and build a console‑like UI. An SDK handles parameter collection, a middle‑layer transports data, and the UI displays it, allowing developers to confront bugs directly.

This approach requires developing an API‑wrapping SDK, a communication service, and a console UI.

PageSpy

PageSpy, open‑sourced by the Huolala front‑end team, is a tool for debugging H5 or remote web projects. It encapsulates native APIs, filters and transforms call parameters into structured messages for the debugging client, which presents them in an interactive console.

Key features include:

One‑click view of client environment (OS, browser, etc.).

Real‑time display of console, network, storage, and element output.

Network request monitoring.

Remote JavaScript execution.

Cross‑browser compatibility.

Improved user experience by speeding up issue resolution.

Using PageSpy for Remote Debugging

Steps to get started:

Deploy PageSpy via Docker, Node, or a release package.

Instantiate the SDK in your project and configure parameters as needed.

Monitor page data in real time.

Inspect network requests (URL, status code, response time).

Leverage the collected information to locate and fix frontend issues quickly.

Screenshots

Examples of the portal homepage, debugging list, and debugging interface are shown in the original article.

Conclusion

Frontend remote debugging is essential for fast and accurate problem solving. PageSpy provides an out‑of‑the‑box, open‑source solution that lets developers view client‑side output, network activity, and execute remote code, reducing reliance on user screenshots and accelerating development efficiency across both remote collaboration and local H5 debugging scenarios.