モバイルデバッグアーティファクトである vConsole の使用に関する詳細な説明

vConsole はフレームワークに依存せず、Vue、React、またはその他のフレームワークで使用できます。今日は、この記事を通して、モバイルデバッグアーティファクトである vConsole の使い方を紹介します。興味のある方はぜひご覧ください。

導入

通常、Web アプリケーションの開発では、console.log に何らかの情報を出力したり、インターフェイスから返される情報やインターフェイスのパフォーマンスを確認したりすることができますが、モバイル端末、つまり携帯電話ではそれを見ることができません。

この場合、アラートを使用して情報をポップアップ表示することもできますが、この方法はあまり便利ではなく、JS スレッドもブロックされ、後続のスレッドが実行されなくなります。デバッグエクスペリエンスにも影響します。

では、console.log をモバイル端末に適用するとどうなるでしょうか?
サードパーティのプラグインが必要です: vConsole

モバイル Web ページ用の軽量でスケーラブルなフロントエンド開発者デバッグパネル。

vConsole はフレームワークに依存せず、Vue、React、またはその他のフレームワークで使用できます。サポートするプラグインがあります

https://gitee.com/Tencent/vConsole/tree/master/公式ドキュメント

特徴

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

使用

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

npm install vconsole

インポートして初期化すると、Chrome devtools と同様に console.log 機能を使用できるようになります。

import VConsole from 'vconsole';
const vConsole = new VConsole();
// 接下来即可照常使用 `console` 等方法
console.log('Hello world');
// 结束调试后，可移除掉
vConsole.destroy();

方法 2: CDN を使用して HTML に直接挿入する

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole 默认会挂载到 `window.VConsole` 上
  var vConsole = new window.VConsole();
  // 接下来即可照常使用 `console` 等方法
    console.log('Hello world');
     
    // 结束调试后，可移除掉
    vConsole.destroy();
</script>

開発環境には、本番環境が削除されたことが表示されます

まず、react や vue でシングルページのアプリケーションを開発している場合、設定ファイルの process.env については皆さん馴染みがないと思います。本番環境は vConsole をロードせず、開発とテストは vConsole をロードし、PC にはブラウザデバッグツールがあるため、表示を携帯電話のみに限定する必要があります。条件が許せば、トリガーする本番環境切り替えボタンを追加することもできます。デバッグパネル。

vue案例

process.env がわからない場合は、Baidu で検索するのが非常に簡単で、グローバル変数と同じです。

main.tsに次のコードを追加します。

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import store from './store'
import VConsole from 'vconsole';
import router from './router'
createApp(App).use(store).use(router).mount('#app')
 
// 判断是否是pc设备
const isPc = () => {
    const userAgentInfo = navigator.userAgent;
    const Agents = ["Android", "iPhone",
        "SymbianOS", "Windows Phone",
        "iPad", "iPod"];
    let flag = true;
    for (let v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}
 
//如果不是生产环境并且不是pc设备那么就显示调试
if (process.env.NODE_ENV != "prod" && !isPc()) {
    console.log(process.env.NODE_ENV);
    const vConsole = new VConsole();
}