モバイル開発とデバッグアーティファクトvConsole

Webページのモバイル版を開発しているとき、次のシナリオがよく表示されます。
(1)開発中、コンピューターで正常に実行され、携帯電話で開いた後にハングしますが、エラーログはに表示されません。携帯電話;
(2)インターネットに接続した後、ユーザーがページが誤動作していると言ったが、自分でそれを再現することができず、ユーザー側にエラーメッセージを見ることができなかった。
(1)コンピュータを携帯電話に接続してログを表示することで解決できる場合、(2)完全なフロントエンドレポートシステムがない場合は非常に受動的です。
開発者としての私たちの魅力は単純です。携帯電話のフロントエンドページでログをすばやく確認する方法はありますか?

vConsoleフロントエンドデバッグパネル
慌てる必要はありません。vConsoleを抱きしめてください。

vConsoleは、WeChatパブリックプラットフォームのフロントエンドチームによって作成されたフロントエンドデバッグパネルであり、携帯電話でのログ表示の問題を専門としています。

現在、vConsoleには2つのパネルがあり、デフォルトは「ログ」パネルで、ログの表示を担当します。

vConsoleは
、モバイルWebページ用の軽量で拡張可能なフロントエンド開発者デバッグパネルです。
特性

  • コンソールログを表示する
  • ネットワークリクエストを表示する
  • ページ要素の構造を表示する
  • Cookie、localStorage、SessionStorageを表示する
  • JSコマンドラインを手動で実行する
  • カスタムプラグイン

はじめ
にvConsoleの最新バージョンをダウンロードします。
npmを使用してインストールします。
npm install vconsole

使用する

// package.json
// "vconsole": "^3.3.4",

import vConsole from 'vconsole';
const Console = new vConsole();

ここに画像の説明を挿入

元の:

おすすめ

転載: blog.csdn.net/weixin_45844049/article/details/109096276