vConsole Observability Kit

vConsole Observability Kit is a small enhancement layer for mobile H5 debugging. It is designed to run beside Tencent vConsole and cover three gaps that matter in real business debugging:

• export captured console logs
• export captured network requests
• parse and preserve XML response bodies

The current Tencent vConsole stable release is 3.15.1. The upstream source analysis shows that vConsole has useful copy features, but it does not provide a built-in all-log export, HAR-like request export, or structured XML response parser.

Quick Start

import VConsole from 'vconsole';
import { VConsoleObservabilityKit } from '@hik-auto/vconsole-observability-kit';

new VConsole();

const kit = new VConsoleObservabilityKit({
  maxLogs: 1000,
  maxRequests: 300,
  parseXml: true
});

kit.install();

// Bind this to your debug button.
window.exportDebugData = () => {
  kit.download();
};

Exports are masked by default. Authorization, cookies, token-like fields, common phone numbers, and common identity-number shapes are replaced with ***.

const payload = kit.exportPayload();
const har = kit.exportHar();

kit.downloadHar();
await kit.copyPayload();
await kit.copyHar();

// Use only in trusted test environments.
const rawPayload = kit.exportPayload({ maskSensitiveData: false });

Recording Window

Full export APIs keep returning the whole in-memory buffer. Recording APIs define a Start/Stop time window and export only logs and requests that started inside that window.

kit.startRecording();

// Reproduce the issue here.

kit.stopRecording();

const recordingPayload = kit.exportRecordingPayload();
const recordingHar = kit.exportRecordingHar();

kit.downloadRecording();
kit.downloadRecordingHar();
await kit.copyRecordingPayload();
await kit.copyRecordingHar();

If a request starts before stopRecording() and finishes later, it is still included in the recording export once the browser request completes.

HAR Export

The HAR export is a HAR 1.2 compatible subset. It is meant for business H5 troubleshooting, not for byte-for-byte parity with Chrome DevTools.

Unavailable browser-network fields are represented with normal HAR placeholders such as -1, empty arrays, or empty strings. This includes low-level DNS/connect/SSL timings, HTTP version, exact header/body sizes, and complete redirect chains.

HTTPS and WebView Notes

HTTPS pages can export data that is visible to JavaScript. Opaque no-cors responses, hidden cookies, Set-Cookie, and headers not exposed by CORS remain unavailable.

Some App WebViews block Blob downloads. In that case, use copyPayload() or copyHar() to display a manual copy panel.

Local Demo

Run a browser demo with JSON, XML, XHR, and failed-request fixtures:

npm run demo

Then open:

http://localhost:4173

npm Publishing

Production consumers should install this SDK from the Hik Auto npm organization:

npm install @hik-auto/[email protected]

The publish entrypoint is:

npm run publish:npm

It runs build/typecheck/tests, checks the package contents with npm pack --dry-run, and publishes to the public npm registry with --access public.

Status

This repository contains the first implementation skeleton, local demo, and landing plan. The next iteration should connect the export action to an internal debug toolbar or a custom vConsole plugin.

Documents

• vConsole analysis
• Implementation plan
• API design
• Test plan
• GitHub publish