ejsc-mna-console

v1.0.0

Published

19 days ago

High-performance, zero-dependency on-device DevTools & Debugging Console for 365 Mini App and Mobile WebViews. Features Apidog-styled Network, Console, WebSocket, and Storage inspectors.

0High
0Medium
0Low

tranvansi6302

ejsc-mna-console ⚡

High-Performance On-Device DevTools & Debugging Console for 365 Mini App & Mobile WebViews.

ejsc-mna-console (thành phần <EjscConsole />) là công cụ kiểm thử và bộ gỡ lỗi trực tiếp trên thiết bị (On-Device DevTools) thế hệ mới dành cho ứng dụng 365 Mini App và các môi trường Mobile WebViews.

Được thiết kế để thay thế hoàn toàn cho vConsole của Tencent, ejsc-mna-console mang lại giao diện gỡ lỗi cao cấp lấy cảm hứng từ Apidog, 100% mã nguồn thuần React, không phụ thuộc vào thư viện bên ngoài và không ảnh hưởng đến hiệu năng Production khi không kích hoạt.

📑 Mục Lục

1. Điểm Khác Biệt & Tính Năng Nổi Bật

🎨 Giao Diện Apidog Professional: Hiển thị Badge phương thức rõ ràng (GET, POST, PUT, DELETE, PATCH), mã trạng thái HTTP status pills, thời gian phản hồi (latency) và thẻ xem chi tiết Request/Response.
🌓 Dual Theme Engine: Chuyển đổi linh hoạt và tức thì giữa hai giao diện Apidog Dark Mode và Clean Light Mode.
🔌 Full-Stack Network Interceptor: Tự động đánh bắt toàn bộ lưu lượng fetch, XMLHttpRequest, gRPC-Web và luồng dữ liệu hai chiều WebSocket (↑ SEND / ↓ RECV).
📋 Robust Multi-Layer Clipboard: Hỗ trợ copy dữ liệu phản hồi, log JSON mượt mà ngay cả trên WebViews di động hoặc môi trường Dev IP không có HTTPS.
🎯 Smart Draggable FAB: Nút bấm nổi hỗ trợ kéo thả mượt mà với hiệu ứng tự động hít vào mép màn hình (snap-to-edge animation).
⚡ Zero-Impact Production: Khi enable={false}, component hoàn toàn không mount DOM và không gán các hàm lắng nghe hay Proxy interceptors.

2. Yêu Cầu Hệ Thống & Cài Đặt

Yêu cầu:

React: Phiên bản >= 18.0.0 hoặc >= 19.0.0
React DOM: Phiên bản >= 18.0.0 hoặc >= 19.0.0

Cài đặt:

# Cài đặt qua pnpm (khuyên dùng)
pnpm add [email protected]

# Hoặc cài đặt qua npm
npm install [email protected]

3. Hướng Dẫn Sử Dụng Nhanh

3.1 Tích hợp vào Root Component (`App.tsx`)

Thêm <EjscConsole /> vào file entry point gốc của ứng dụng:

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

export default function App() {
  // Kích hoạt tự động trong DEV mode hoặc khi có query ?debug=1 trên URL
  const showDebug = import.meta.env.DEV || isDebugEnabled();

  return (
    <>
      <YourAppRoutes />

      {/* Bộ gỡ lỗi EjscConsole */}
      <EjscConsole enable={showDebug} theme="dark" />
    </>
  );
}

3.2 Kích hoạt Debug trong Môi Trường Thực Bằng URL / Storage

Bạn có thể bật công cụ gỡ lỗi trên thiết bị thật mà không cần build lại ứng dụng thông qua:

URL Query Parameter: Mở Mini App kèm tham số ?debug=1 (ví dụ: https://miniapp.domain.com/?debug=1).
LocalStorage: Chạy lệnh localStorage.setItem('ejsc_debug', '1') trong console trình duyệt và tải lại trang.

4. Chi Tiết Các Tab Gỡ Lỗi (Feature Tour)

| Tab Gỡ Lỗi | Chức Năng Chi Tiết | | :--- | :--- | | Console | Luồng log thời gian thực (log, info, warn, error), log sự kiện Native Bridge, bộ lọc theo cấp độ, tìm kiếm từ khóa tức thì, cây JSON có thể mở rộng và copy 1-click. | | Network | Bảng theo dõi HTTP Request với Badge phương thức, mã HTTP Status, đo thời gian phản hồi, tab xem chi tiết Headers, Request Body, và Response Body. | | WebSocket | Theo dõi các phiên kết nối WebSocket, luồng tin nhắn hai chiều real-time (↑ SEND / ↓ RECV), định dạng dữ liệu JSON chuyên nghiệp. | | Storage | Kiểm tra và quản lý dữ liệu lưu trữ thời gian thực của localStorage, sessionStorage và document.cookie với tính năng xem, copy và xóa mục lẻ. | | Settings | Nút bấm 1-tap chuyển đổi Dark/Light mode, tính năng Reset All xóa sạch dữ liệu log và thông số chẩn đoán thiết bị / Viewport. |

5. API Component (`EjscConsoleProps`)

export interface EjscConsoleProps {
  /**
   * Bật hoặc tắt công cụ gỡ lỗi.
   * Khi là false, component sẽ không render và không gán các interceptors.
   * @default true
   */
  enable?: boolean;

  /**
   * Chế độ giao diện ban đầu ('dark' | 'light').
   * @default 'dark'
   */
  theme?: 'dark' | 'light' | '';

  /**
   * Cấu hình tùy chỉnh bổ sung.
   */
  options?: Record<string, unknown>;

  /**
   * Callback gọi khi xảy ra lỗi trong quá trình khởi tạo interceptors.
   */
  onError?: (error: unknown) => void;
}

6. Bỏ Qua Các Request Không Cần Thiết

Đối với các request chạy ngầm định kỳ (như Heartbeat pings, Healthcheck) tránh làm nhiễu danh sách Network, bạn có thể truyền thuộc tính _noEjscConsole: true:

// Sử dụng với fetch
fetch('/api/v1/heartbeat', {
  _noEjscConsole: true,
} as any);

// Sử dụng với XMLHttpRequest
const xhr = new XMLHttpRequest();
(xhr as any)._noEjscConsole = true;
xhr.open('GET', '/api/v1/ping');
xhr.send();

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme