私たちは、ブラウザでVUEページを開発した場合、ブラウザは、デバッグのためのネイティブサポートを持っているので、我々は使いやすい開発しました。しかし、今の端は、モバイル時代に突入したページのモバイル終わりの需要が高まっています。

私たちは、ページの移動体側を開発する場合、問題はテストがエラーをブラウザに戻っていた発生した場合、通常は、電話のみ側後に試験し、開発したブラウザで実行されます。APPとさえも、再委託契約後、ページに埋め込まれました。もちろん、原因携帯電話のブラウザとWebブラウザの違いに、より多くの奇妙な現象があり、多くの場合、Webブラウザ、携帯電話が動作しない場合には良い見つけます。

だから、最初にすべての私たちは、携帯電話側のプラグでデバッガを必要としています。それでもページのバグの終わりを見つけるために段階的に移動するために、アラートを使用している場合は、vConsoleを試してみてください。

vConsole

vConsoleは、マイクロチャネルの公共プラットフォームのフロントエンドWebフロントエンドの開発者チームパネルによって開発され、コンソールが容易な開発とデバッグ用のログを表示するために使用することができます。することができますvConsole.jsは、ダウンロードに必要なJSをダウンロードします。ダウンロード後、解凍、distのフォルダ内のvconsole.min.jsを見つけ、プロジェクトに追加：

<script src="path/to/vconsole.min.js"></script>
<script>
  // init vConsole
  var vConsole = new VConsole();
  console.log('Hello world');
</script>

ことに注意してくださいVConsoleだけではなく、ターゲット。そのため、マニュアルの新しいインスタンスを前に、それがページに挿入されることはありません。vConsole原型已实例化vConsole

ファイル

vConsoleをインストールした後、あなたは物事を思いますか？

もう一つの大きな問題は、我々は確かに、ユーザーがデバッグページを参照できるようにすることができないということですので、我々は我々のプログラムの設定への扉をバックこっそりする必要があります。

コードの動的な導入

参照用の2つのデザインのアイデアがあります。

プログラムのどこかにバックドアを設定します。10または10秒に自動的にコードを導入した後、プレスをクリックします。
動的な動作環境によって導入VConsole。すなわち、本番環境をコードに導入されていない間、導入されるテスト段階です。

バックドアを設定

どこかのプログラムで自動的に長さコードを組み込んだ10秒に設定。

まず、10秒必要な生成するために組み合わさ3つのイベントの影響を押してください。

@touchstart：プレススタート
@touchmove：チャンを移動するプロセス
@touchend：エンドプレス

バインディングのイベント

次のコードは、ラベル上のこれらの3つのイベントのご紹介：

<div @touchstart="handleTouchstart" @touchmove="handleTouchmove" @touchend="handleTouchend">
   <van-col span="24" class="loginPage-title">title<an-col>
</div>

対応方法：

handleTouchstart() {
  touchStart();
},
handleTouchmove() {
  touchMove();
},
handleTouchend() {
  touchEnd();
},

どのtouchStart、touchMove、touchEnd方法インポートファイルを一元管理を容易にするため、外から入って来、当然のことながら、実際には、このファイルに直接実装することができます。

10秒を押してください

まず、何を10秒間長押しを意味しています。touchstart後にそのように10秒間クリックした後に呼ばれる、それは確かに長い10秒で呼ばれていない10秒のカウントを開始します。押して10秒、10秒のための指のタッチでなければならず、touchmove touchendイベント期間をトリガすることはできません。

だから、アイデアは、タイマーをリセットしますtouchmoveとtouchendイベント中にトリガーした場合、開始時刻touchstart、次のようになります。

let timeOutEvent = null;

export const touchStart = () => {
    timeOutEvent = setTimeout(function () {
        longPress();
    }, 10000);

};
export const touchMove = () => {
    clearTimeout(timeOutEvent);
    timeOutEvent = 0;
}

export const touchEnd = () => {
    clearTimeout(timeOutEvent);
}

でlongPressプロセスを動的vConsoleを導入するには：

const longPress = () => {
    clearTimeout(timeOutEvent); //清除定时器
    timeOutEvent = 0;
    //执行长按要执行的内容
    vConsoleLog()
};

const vConsoleLog = () => {
    let mapScript = document.getElementById("vConsoleLog");
    if(mapScript){
        return;
    }
    let script = document.createElement('script');
    script.id = 'vConsoleLog';
    script.type = 'text/javascript';
    script.src = './console.js';
    document.body.appendChild(script);
}

わずか10秒の長押しを必要なときにこのように、我々はプログラムにバックドアを移植し、デバッグする必要のある、vConsoleが出てきました。

動的な環境の紹介によると

あなたは少し厳しいたい場合は、我々は、ユーザーが任意の時点でデバッグボタンを表示したくない、そして環境（ENV）に応じて、vConsole導入することができます。

ターンのように論評は最大の励ましです

バックドアバー（VUE）を携帯電話側のページデバッガを終了するには