# @huolala-tech/page-spy > A developer tool for debugging remote web page. Latest version **1.5.7** (published 2024-01-09) · MIT license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install @huolala-tech/page-spy pnpm add @huolala-tech/page-spy yarn add @huolala-tech/page-spy bun add @huolala-tech/page-spy ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 1.5.7 | | Published | 2024-01-09 | | First published | 2023-04-13 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Node | >=10 | | Dependencies | 2 | | Unpacked size | 1004.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 350 | | Maintainers | qikang.yuan, huolala-fe, zhiyang-deng, wangdashuai, blucass, yanagieiichi | | Keywords | pagespy, debug, remote, inspect, devtools | ## Links - npm: https://www.npmjs.com/package/@huolala-tech/page-spy - Repository: https://github.com/HuolalaTech/page-spy - Homepage: https://huolalatech.github.io/page-spy-web/ - Issues: https://github.com/HuolalaTech/page-spy/issues - npm.io page: https://npm.io/package/@huolala-tech/page-spy ## Dependencies (2) - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.13.0 - [copy-to-clipboard](https://npm.io/package/copy-to-clipboard.md) ^3.3.1 ## 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 - [dbmorph](https://npm.io/package/dbmorph.md) — 0 weekly downloads - [@tickdeck/broker](https://npm.io/package/@tickdeck/broker.md) — 0 weekly downloads - [fndry39-screens](https://npm.io/package/fndry39-screens.md) — 0 weekly downloads ## Recent versions - 1.5.7 (latest) — 2024-01-09 - 1.5.0-beta.8 (beta) — 2023-12-30 - 1.5.6 — 2024-01-09 - 1.5.5 — 2024-01-08 - 1.5.4 — 2024-01-08 - 1.5.3 — 2024-01-08 - 1.5.2 — 2024-01-08 - 1.5.1 — 2024-01-08 - 1.5.0 — 2024-01-08 - 1.4.11 — 2024-01-03 - 1.5.0-beta.7 — 2023-12-28 - 1.5.0-beta.6 — 2023-12-28 - 1.5.0-beta.5 — 2023-12-27 - 1.4.10 — 2023-12-26 - 1.5.0-beta.4 — 2023-12-26 - … 30 more at https://npm.io/package/@huolala-tech/page-spy/versions ## README [page-spy-web]: https://github.com/HuolalaTech/page-spy-web.git 'page-spy-web' [coveralls-image]: https://coveralls.io/repos/github/HuolalaTech/page-spy/badge.svg?branch=main [coveralls-url]: https://coveralls.io/github/HuolalaTech/page-spy?branch=main [npm-image]: https://img.shields.io/npm/v/@huolala-tech/page-spy [npm-url]: https://www.npmjs.com/package/@huolala-tech/page-spy [minified-image]: https://img.shields.io/bundlephobia/min/@huolala-tech/page-spy [minified-url]: https://unpkg.com/browse/@huolala-tech/page-spy/dist/index.min.js

Page Spy SDK

PageSpy is a developer platform for debugging web page.

[![Coverage Status][coveralls-image]][coveralls-url] [![NPM Package][npm-image]][npm-url] [![Minified size][minified-image]][minified-url] PageSpy - Remote debugging as seamless as local debugging. | Product Hunt PageSpy - Remote debugging as seamless as local debugging. | Hacker News English | [中文](./README_ZH.md)
## What's this This repo is the SDK which be used in [HuolalaTech/page-spy-web][page-spy-web], where SDK collects information and `page-spy-web` consumes and filters, organizes, and converts information into a standardized format, which is then showed on the page. ## Usage For data security and your convenience, we provide a complete and out-of-box solution. Read the "How to use" section in the [HuolalaTech/page-spy-web][page-spy-web] to get more detail. 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. ## The init parameters ### Web For browser, all parameters are optional, here is a description of each property and its default value： ```ts window.$pageSpy = new PageSpy(config?: InitConfig) 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; } ``` ### Mini Program Except for the `api` parameter, all parameters are optional, here is a description of each property and its default value： ```ts const pageSpy = new PageSpy(config?: InitConfig) interface InitConfig { // Server domain, must be provided。 // Example："example.com" api: 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; // Manually specify the scheme of the PageSpy service. // Note that except for development environment, mini-program requires the scheme to be set to "https", so: // - By default, pass the value undefined or null, the SDK will parse it to TRUE; // - 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; // Disable pagespy on release environment. // - true (Default): only allow pagespy init on develop and trail environment. // - false: allow using in release environment disabledOnProd?: boolean | null; } ``` For more details of mini-program usage, please refer to [Mini-Program Usage](https://github.com/HuolalaTech/page-spy/wiki/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E) --- _Source: https://npm.io/package/@huolala-tech/page-spy · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._