# @huolala-tech/page-spy-browser

> A developer tool for debugging remote web page.

Latest version **2.2.12** (published 2026-08-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install @huolala-tech/page-spy-browser
pnpm add @huolala-tech/page-spy-browser
yarn add @huolala-tech/page-spy-browser
bun add @huolala-tech/page-spy-browser
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.2.12 |
| Published | 2026-08-04 |
| First published | 2024-01-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 350 |
| Maintainers | wangdashuai, zhiyang-deng, huolala-fe, yanagieiichi, qikang.yuan, blucass |
| Keywords | pagespy, debug, remote, inspect, devtools, reactnative |

## Links

- npm: https://www.npmjs.com/package/@huolala-tech/page-spy-browser
- Repository: https://github.com/HuolalaTech/page-spy
- Homepage: https://www.pagespy.org/
- Issues: https://github.com/HuolalaTech/page-spy/issues
- npm.io page: https://npm.io/package/@huolala-tech/page-spy-browser

## Dependencies (5)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.13.0
- [iseedeadpeople](https://npm.io/package/iseedeadpeople.md) ^1.0.0
- [copy-to-clipboard](https://npm.io/package/copy-to-clipboard.md) ^3.3.1
- [@huolala-tech/page-spy-base](https://npm.io/package/@huolala-tech/page-spy-base.md) ^2.2.6
- [@huolala-tech/page-spy-types](https://npm.io/package/@huolala-tech/page-spy-types.md) ^2.2.6

## Alternatives

- [pagerjs](https://npm.io/package/pagerjs.md) — 60 weekly downloads
- [whistle.savefor-mock](https://npm.io/package/whistle.savefor-mock.md) — 4 weekly downloads
- [@depup/casual](https://npm.io/package/@depup/casual.md) — 0 weekly downloads
- [@availity/mock-server](https://npm.io/package/@availity/mock-server.md) — 0 weekly downloads
- [@scotthuang/agent-knock-knock-pi](https://npm.io/package/@scotthuang/agent-knock-knock-pi.md) — 0 weekly downloads

## Recent versions

- 2.2.12 (latest) — 2026-08-04
- 2.0.0-beta.2 (beta) — 2024-11-27
- 2.2.11 — 2026-05-26
- 2.2.10 — 2026-01-06
- 2.2.9 — 2025-10-31
- 2.2.8 — 2025-09-29
- 2.2.7 — 2025-09-29
- 2.2.6 — 2025-09-03
- 2.2.5 — 2025-07-15
- 2.2.4 — 2025-05-19
- 2.2.3 — 2025-05-12
- 2.2.2 — 2025-04-24
- 2.2.1 — 2025-04-08
- 2.2.0 — 2025-04-08
- 2.1.9 — 2025-03-28
- … 59 more at https://npm.io/package/@huolala-tech/page-spy-browser/versions

## README

[npm-image]: https://img.shields.io/npm/v/@huolala-tech/page-spy-browser?logo=npm&label=version
[npm-url]: https://www.npmjs.com/package/@huolala-tech/page-spy-browser
[minified-image]: https://img.shields.io/bundlephobia/min/@huolala-tech/page-spy-browser
[minified-url]: https://unpkg.com/browse/@huolala-tech/page-spy-browser/dist/iife/index.min.js

English | [中文](./README_ZH.md)

# `@huolala-tech/page-spy-browser`

[![SDK version][npm-image]][npm-url]
[![SDK size][minified-image]][minified-url]

> The SDK used in Web environment.

## Usage

```html
<!-- 1. Load a <script> in your html -->
<script
  crossorigin="anonymous"
  src="https://<your-host>/page-spy/index.min.js"
></script>

<!-- 2. Init -->
<script>
  window.$pageSpy = new PageSpy(config?: InitConfig)
</script>
```

After the integration, open your project in browser, there should be a widget (round container with white background and include logo) on the bottom left. If not, check your config.

## `InitConfig` definition

For browser, all parameters are optional.

```ts
interface InitConfig {
  // The SDK automatically analyses and determines the address of
  // the Server (api) and the address of the debug side (clientOrigin)
  // from the "src" value, assuming you introduced it from https://example.com/page-spy/index.min.js,
  // so the SDK will set it up internally:
  //   - api: "example.com"
  //   - clientOrigin: "https://example.com"
  // If your service is deployed elsewhere, you can manually specify here to override.
  api?: string;
  clientOrigin?: string;

  // "project" is an aggregation of information that can be searched in the room list on the debug side.
  // default: 'default'
  project?: string;

  // "title" is a user-defined parameter that can be used to distinguish the current debugging client,
  // and the corresponding information is displayed under the "device id" in each debugging connection panel.
  // default: '--'
  title?: string;

  // Indicates whether the SDK will automatically render the "Circle with Logo on White Background"
  // control in the bottom left corner of the client when initiation is complete. If set to false,
  // you can call window.$pageSpy.render() to render it manually.
  // default: true
  autoRender?: boolean;

  // Manually specify the scheme of the PageSpy service.
  // This works if the SDK can't correctly analyse the scheme, e.g. if PageSpy's browser plugin
  // is introduced into the SDK via chrome-extension://xxx/sdk/index.min.js, which will be
  // be parsed by the SDK as an invalid "chrome-extension://" and fallback to ["http://", "ws://"].
  //   - (Default) Pass the value undefined or null: the SDK will parse it automatically;
  //   - Pass boolean value:
  //     - true: the SDK will access the PageSpy service via ["https://", "wss://"].
  //     - false: the SDK will access the PageSpy service via ["http://", "wss://"]
  enableSSL?: boolean | null;

  // All internal plugins are carried with PageSpy by default out of the box.
  // You can disable some plugins as needed.
  disabledPlugins?: (InternalPlugins | string)[];

  // After adding support for offline replay in PageSpy@1.7.4, the client-integrated SDK can work without
  // establishing a connection with the debugger.
  // Default value is false, when users set it to other values will enters "offline mode", where PageSpy
  // will not create rooms or establish WebSocket connections.
  offline?: boolean;

  // Customize logo source url.
  logo?: string;

  // Customize logo style.
  logoStyle?: Object;
}

type InternalPlugins =
  | 'ConsolePlugin'
  | 'ErrorPlugin'
  | 'NetworkPlugin'
  | 'StoragePlugin'
  | 'DatabasePlugin'
  | 'PagePlugin'
  | 'SystemPlugin';
```

---
_Source: https://npm.io/package/@huolala-tech/page-spy-browser · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._