⚡ EjscConsole (ejsc-ma-console)

High-Performance On-Device DevTools & Debugging Console for 365 Mini Apps & Mobile WebViews.
Replaces Tencent's vConsole with a 100% native, zero-external-dependency, Apidog-styled debugger.

🌟 Key Highlights

• 🎨 Apidog Aesthetics: Signature method badges (GET, POST, PUT, DELETE, PATCH), status pills, duration tags, and segmented inspector cards.
• 🌓 Dual Theme Engine: Seamless instant switching between Apidog Charcoal Dark Mode and Clean Light Mode.
• 🛡️ 100% Solid & Isolated: Opaque background that prevents underlying application bleeding.
• 🔌 Full-Stack Network Interceptor: Captures fetch, XMLHttpRequest, gRPC-Web, and WebSocket duplex traffic (↑ SEND / ↓ RECV) out of the box.
• 📋 Robust Multi-Layer Clipboard: Works reliably across mobile WebViews (iOS Safari, Android WebView) and non-secure HTTP dev IP environments.
• 🎯 Smart Draggable FAB: Smooth touch & mouse drag-to-move with automatic snap-to-edge animation.
• ⚡ Zero-Impact Production: When enable={false}, mounts nothing and attaches zero listeners/proxies.

📦 Installation

# Using pnpm
pnpm add ejsc-ma-console

# Using npm
npm install ejsc-ma-console

# Using yarn
yarn add ejsc-ma-console

🚀 Quick Start

1. Mount into your Application Root (e.g. App.tsx)

import React from 'react';
import { EjscConsole, isDebugEnabled } from 'ejsc-ma-console';

export default function App() {
  // Automatically enabled in DEV mode or when ?debug=1 is in URL
  const debug = import.meta.env.DEV || isDebugEnabled();

  return (
    <>
      <YourAppRoutes />

      {/* Initialize DevTools */}
      <EjscConsole enable={debug} theme="dark" />
    </>
  );
}

2. Runtime Debug Activation (Without Rebuilding)

• URL Query Parameter: Open your Mini App with ?debug=1 (e.g. https://miniapp.homebooking.global/?debug=1).
• LocalStorage: Execute localStorage.setItem('ejsc_debug', '1') in browser console and reload.

🔍 Feature Tour

| Tab | Features | |---|---| | Console | Real-time log, info, warn, error stream, Native Bridge event logs, segmented level filters, instant keyword search, expandable structured JSON tree, 1-click copy. | | Network | Apidog method pills, HTTP status tags, latency measurements, 3-subtab inspector (Response, Request Body, Headers), URL search filter. | | WebSocket | Connection session monitor, realtime bidirectional message stream (↑ SEND / ↓ RECV), formatted JSON payloads with instant copy. | | Storage | Live snapshot of localStorage, sessionStorage, and document.cookie with key-value table, per-item copy, and key deletion. | | Settings | One-tap Dark/Light theme selector, Reset All data button (clears logs, network, sockets), device & viewport diagnostics. |

⚙️ Component API

export interface EjscConsoleProps {
  /**
   * Enables or disables the console.
   * When false, nothing is rendered and interceptors are not attached.
   * @default true
   */
  enable?: boolean;

  /**
   * Initial theme mode. Can be toggled on-the-fly inside the console UI.
   * @default 'dark'
   */
  theme?: 'dark' | 'light' | '';

  /**
   * Optional custom configurations (reserved for future plugins).
   */
  options?: Record<string, unknown>;

  /**
   * Callback fired if interceptor attachment encounters runtime errors.
   */
  onError?: (error: unknown) => void;
}

🔕 Ignoring Background Requests

To prevent noisy background requests (e.g. healthchecks, heartbeat pings) from cluttering the Network tab, pass _noEjscConsole: true:

// Fetch
fetch('/api/heartbeat', {
  _noEjscConsole: true,
} as any);

// XMLHttpRequest
const xhr = new XMLHttpRequest();
(xhr as any)._noEjscConsole = true;
xhr.open('GET', '/api/ping');
xhr.send();

🔄 Migration from DebugConsole (vConsole)

Replace the import specifier:

- import { DebugConsole } from 'ejsc-ma-component';
- <DebugConsole enable={true} theme="dark" />

+ import { EjscConsole } from 'ejsc-ma-console';
+ <EjscConsole enable={true} theme="dark" />

Compatibility Note: DebugConsole is retained as a deprecated alias to prevent breaking existing applications.

📁 Repository Structure

ejsc-ma-console/
├── docs/
│   └── EjscConsole/            # Extended developer documentation
│       └── README.md
├── src/
│   ├── components/             # Backwards-compatible aliases
│   │   └── Utilities/
│   │       ├── DebugConsole.tsx
│   │       └── DebugConsole.stories.tsx
│   ├── debug/                  # Core Debug Engine
│   │   ├── EjscConsole.tsx     # Main Component
│   │   ├── isDebugEnabled.ts   # URL / Storage debug flag detector
│   │   ├── store.ts            # Ring Buffer & Pub-Sub State Manager
│   │   ├── interceptors/       # Console, Network, WebSocket, Storage Proxies
│   │   ├── ui/                 # Panel, FloatingButton, Theme Context, Tabs
│   │   └── utils/              # Multi-layer clipboard copy engine
│   ├── utils/                  # Shared helpers (cn, logger)
│   ├── index.ts                # Public Library Entry Point
│   └── styles.css              # Tailored Design Tokens
├── package.json
└── tsconfig.json

📄 License

MIT © 365 Mini App Ecosystem