webscope-inspector

v2.0.3

Published

22 days ago

WebScope — A zero-dependency debugging & inspection toolkit for React. Track network requests, images, routes, and storage with a beautiful built-in dev UI. Works with Next.js, Vite, Angular, and more.

WebScope

A zero-dependency debugging & inspection toolkit for React applications.

Track network requests, images, routes, and browser storage — with a polished inspector panel built in. Works with Next.js (App & Pages Router), Vite/React, Remix, Angular, and any JavaScript environment.

Full documentation →

Features

| Feature | Description | |---|---| | Network | Captures fetch, axios, and XMLHttpRequest with status, headers, bodies, timing, and cURL export | | Images | Tracks images loaded on the page — local, network, or broken | | Storage | Inspect, search, edit, and delete localStorage / sessionStorage with a JSON tree viewer | | Routes | Navigation timeline with push / replace / pop / initial actions | | Decryptors | Register custom functions to decode encrypted responses inline | | Settings | Toggle tabs, change accent colour, switch dark/light mode | | Resizable | Drag-to-resize panel on desktop, bottom sheet on mobile | | Zero Dependencies | No runtime dependencies — React is a peer, and only the panel UI needs it |

Install

npm install webscope-inspector

Quick start

// app/layout.tsx  (Next.js App Router)
import { WebScopeProvider } from 'webscope-inspector';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <WebScopeProvider>{children}</WebScopeProvider>
      </body>
    </html>
  );
}

# .env.local
NEXT_PUBLIC_ALICE_ENABLED=true

That's it. A floating WebScope button appears in the corner — click it to open the inspector.

No CSS import needed. WebScope injects its own stylesheet at runtime, so it is styled correctly with zero configuration. You can still import 'webscope-inspector/styles' if you'd rather control load order.

See Getting Started for Vite, Pages Router, Remix, Angular, and vanilla JS.

Capturing axios

fetch and XMLHttpRequest are intercepted automatically. Axios needs one line per instance:

import axios from 'axios';
import { attachWebScopeAxiosInterceptor } from 'webscope-inspector';

const api = axios.create({ baseURL: 'https://api.example.com' });
attachWebScopeAxiosInterceptor(api);

Enabling WebScope

WebScope activates when either check passes — or whenever you pass an explicit enabled prop, which overrides both:

process.env.NEXT_PUBLIC_ALICE_ENABLED === 'true'
sessionStorage.getItem('ALICE_ENABLED') === 'true'

The second is useful for debugging a deployed build without a rebuild:

sessionStorage.setItem('ALICE_ENABLED', 'true');
location.reload();

Recommended for most apps:

<WebScopeProvider enabled={process.env.NODE_ENV === 'development'}>

The flag is still named ALICE_ENABLED for backward compatibility with WebScope's previous name. See Configuration.

Documentation

| Guide | | |---|---| | Getting Started | Install and wire up any framework | | Configuration | Enabling, env vars, persisted settings, memory limits | | Interceptors | fetch, axios, XHR, manual logging | | Decryptors | Decode encrypted responses inline | | Theming | Accent, dark/light, style isolation, CSP | | API Reference | Every export, prop, and type | | Troubleshooting | Fixes for the problems people hit |

Contributing? See CONTRIBUTING.md and DEVELOPMENT.md.

Backward compatibility

All earlier Alice exports still work as backward-compatible aliases:

import { AliceProvider } from 'webscope-inspector';        // still works
import { WebScopeProvider } from 'webscope-inspector';     // prefer this

The CSS class prefix changed from alice-* to ws-*. Update any custom selectors targeting the old prefix. Full mapping in the API Reference.

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme