vConsole

英語 | 简体中文

vコンソール

モバイル Web ページ用の軽量で拡張可能なフロントエンド開発者ツール。

vConsole はフレームワークフリーなので、Vue、React、またはその他のフレームワーク アプリケーションで使用できます。

現在、vConsole は WeChat ミニプログラムの公式デバッグ ツールです。

---

特徴

• ログ: console.log|info|error|...
• ネットワーク: XMLHttpRequest 、 Fetch 、 sendBeacon
• 要素: HTML 要素ツリー
• ストレージ: Cookies 、 LocalStorage 、 SessionStorage
• JSコマンドを手動で実行する
• カスタムプラグイン

詳細については、以下のスクリーンショットを参照してください。

---

リリースノート

最新バージョン:

各バージョンの詳細なリリース ノートは変更ログで入手できます。

---

ガイド

使用法の詳細については、「チュートリアル」を参照してください。

インストールには、vConsole をプロジェクトに追加する主な方法が 2 つあります。

方法 1: npm を使用する (推奨)

$ npm install vconsole

 import VConsole from 'vconsole' ;

const vConsole = new VConsole ( ) ;
// or init with options
const vConsole = new VConsole ( { theme : 'dark' } ) ;

// call `console` methods as usual
console . log ( 'Hello world' ) ;

// remove it when you finish debugging
vConsole . destroy ( ) ; 

方法 2: HTML で CDN を使用する:

 < script src =" https://unpkg.com/vconsole@latest/dist/vconsole.min.js " > </ script >
< script >
  // VConsole will be exported to `window.VConsole` by default.
  var vConsole = new window . VConsole ( ) ;
</ script >

利用可能な CDN:

• https://unpkg.com/vconsole@latest/dist/vconsole.min.js
• https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js

---

プレビュー

http://wechatfe.github.io/vconsole/demo.html

---

スクリーンショット

概要

ライトテーマ

ダークテーマ

ログパネル

ログのスタイル設定

コマンドライン

システムパネル

公演情報

ログを別パネルに出力する

 console . log ( 'output to Log panel.' )
console . log ( '[system]' , 'output to System panel.' )

ネットワークパネル

リクエストの詳細

エレメントパネル

リアルタイム HTML 要素の構造

ストレージパネル

Cookie / LocalStorage / SessionStorage の追加、編集、削除、またはコピー

---

ドキュメント

vコンソール:

• チュートリアル
• パブリックプロパティとメソッド
• 組み込みプラグイン: プロパティとメソッド

カスタムプラグイン:

• プラグイン: はじめに
• プラグイン: プラグインの構築
• プラグイン：イベントリスト

---

サードパーティのプラグイン

• vConsole ソース
• vconsole-webpack-プラグイン
• vconsole-stats-プラグイン
• vconsole-vue-devtools-plugin
• vconsole-outputlog-plugin
• vite-プラグイン-vconsole

---

フィードバック

QQグループ: 497430533

---

ライセンス

MITライセンス