explaingit

tencent/vconsole

★ 17,465TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

In-page mobile debugging panel that adds console, network, element, and storage inspectors to any web page for testing on phones.

Mindmap

mindmap
  root((vConsole))
    Inputs
      Web page scripts
      Console events
      Network requests
    Outputs
      Log panel
      Network tab
      Storage editor
    Use Cases
      Mobile web debug
      WeChat mini apps
      Field bug triage
    Tech Stack
      TypeScript
      JavaScript
      npm
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Debug a mobile web page on a real phone where browser dev tools are not available

USE CASE 2

Add a WeChat mini-program debug panel for QA testers in the field

USE CASE 3

Inspect cookies, localStorage, and network requests on an iOS Safari page

USE CASE 4

Build a custom debug plugin panel for a specific app feature

Tech stack

TypeScriptJavaScriptnpm

Getting it running

Difficulty · easy Time to first run · 5min

Make sure to gate it behind a flag so the panel does not ship to end users in production.

MIT license - free to use, modify, and ship in commercial products with attribution.

In plain English

vConsole is a developer debugging tool designed specifically for mobile web pages. On a desktop browser, developers have easy access to the browser's built-in developer tools (console, network inspector, storage viewer), but on a phone those tools aren't available. vConsole solves this by injecting a small floating panel directly into your web page, giving you access to debugging features on any mobile device. The panel includes several tabs: a log viewer that captures all console.log, console.error, and similar messages, a network monitor that shows requests made by the page, an element inspector that shows the HTML structure, and a storage viewer where you can read, add, edit, or delete cookies, LocalStorage, and SessionStorage. You can also type and run JavaScript commands directly from the panel. It is framework-agnostic, meaning it works with any JavaScript framework or with plain HTML pages. vConsole is the official debugging tool for WeChat Miniprograms (mini apps inside the WeChat messaging platform). To add it to a project, you either install it via npm and import it with a couple of lines of JavaScript, or you load it directly from a CDN link in your HTML. After you're done debugging, you call vConsole.destroy() to remove it. The tool is written in TypeScript and released under the MIT license. A plugin system lets developers extend it with custom panels.

Copy-paste prompts

Prompt 1
Show me the minimal HTML to load vConsole from a CDN and gate it behind a debug query parameter
Prompt 2
Add vConsole to a React app via npm and only mount it in non-production builds
Prompt 3
Write a vConsole plugin tab that lists current user feature flags and toggles them
Prompt 4
Use vConsole to capture failing XHR requests on an Android Chrome page
Prompt 5
Set up vConsole inside a WeChat Miniprogram for QA testing
Open on GitHub → Explain another repo

← tencent on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.