# PageSpy — Remote Debugging Platform for Web and Mobile Apps

> A self-hosted remote debugging tool that lets developers inspect console logs, network requests, DOM, and storage of web pages running on any device in real time.

## Install

Save in your project root:

# PageSpy — Remote Debugging Platform for Web and Mobile Apps

## Quick Use
```bash
# Run with Docker
docker run -d -p 6752:6752 ghcr.io/nicktogo/page-spy-web:latest

# Or install via npm
npm install -g @nicktogo/page-spy-api
page-spy-api

# Add the SDK to your page
# <script src="https://your-server:6752/page-spy/index.min.js"></script>
```

## Introduction
PageSpy is an open-source remote debugging platform developed by HuolalaTech. It allows developers to inspect console output, network requests, DOM state, localStorage, and cookies of web pages running on any device in real time, without requiring physical access to the device or USB connections.

## What PageSpy Does
- Captures and forwards console logs (log, warn, error) from remote devices to the debugging dashboard
- Intercepts and displays all network requests (XHR, Fetch, WebSocket) with headers and payloads
- Inspects localStorage, sessionStorage, cookies, and IndexedDB contents remotely
- Provides a live DOM inspector for viewing the page structure on remote devices
- Records debugging sessions for offline review and bug reproduction

## Architecture Overview
PageSpy consists of three components: a lightweight JavaScript SDK injected into the target page, a relay server that routes debugging data, and a web-based dashboard for viewing the data. The SDK hooks into browser APIs (console, XMLHttpRequest, fetch, Storage) to capture events and sends them to the relay server via WebSocket. The dashboard connects to the same server to receive and display the events in real time.

## Self-Hosting & Configuration
- Deploy the server with Docker or as a standalone Node.js process on your infrastructure
- Inject the client SDK into target pages via a script tag pointing to your server
- Configure the server port, allowed origins, and authentication via environment variables
- Access the debugging dashboard at the server URL to see connected devices and sessions
- Use the recording feature to save sessions for async debugging and team sharing

## Key Features
- Cross-platform remote inspection for mobile browsers, WebViews, and desktop browsers
- No USB, no browser extension required; works over the network with a script tag
- Network request inspection with full request/response headers and body data
- Session recording and replay for asynchronous debugging workflows
- Plugin architecture for extending with custom data panels

## Comparison with Similar Tools
- **Chrome DevTools** — requires same device or USB; PageSpy works fully over the network
- **Eruda** — mobile console overlay on the device itself; PageSpy sends data to a remote dashboard
- **vConsole** — in-page debug panel by Tencent; PageSpy provides a separate dashboard UI
- **Weinre** — legacy remote inspector; PageSpy is modern with WebSocket transport and recording
- **BrowserStack** — cloud device testing; PageSpy is self-hosted and free

## FAQ
**Q: Does PageSpy affect page performance?**
A: The SDK is lightweight and uses efficient WebSocket transport. Impact is minimal for debugging sessions.

**Q: Can I use PageSpy with React Native or hybrid apps?**
A: Yes. PageSpy supports WebView environments commonly used in hybrid and React Native apps.

**Q: Is the debugging data encrypted?**
A: Communication uses WebSocket. Deploy behind HTTPS with a reverse proxy for encrypted transport.

**Q: Can multiple developers debug the same page simultaneously?**
A: Yes. Multiple dashboard users can connect to and observe the same debugging session.

## Sources
- https://github.com/HuolalaTech/page-spy-web
- https://www.pagespy.org

---
Source: https://tokrepo.com/en/workflows/asset-a5928602
Author: AI Open Source