To leave a phone-side page debugger back door bar (vue)

When we developed vue page in a browser, because the browser has native support for debugging, we developed easy to use. But now the end has entered the mobile era, demand for mobile end of the page is growing.

When we develop the mobile side of the page is usually done in a browser developed, tested only after the phone side, if the problem occurs test had returned to the browser for errors. APP and even embedded in the page, even after re-commissioning contract. Of course, there are more strange phenomenon, due to differences in cell phone browser and a Web browser, often find good on a Web browser, a case where the mobile phone does not work.

So first of all we need a debugger in the mobile phone side plug. If you are still using alert to move step by step to locate the end of the page bug, try the vConsole.

vConsole

vConsole is developed by a micro-channel public platform front-end Web front-end developer team panel, console can be used to display the log for easy development and debugging. Can vConsole.js Download to download the required js. After the download, unzip, find vconsole.min.js in dist folder, added to the project:

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

Please note that VConsoleonly vConsolethe 原型, rather than a 已实例化target. Therefore, before new instances of the manual, vConsoleit will not be inserted into the page.

After installing vConsole, do you think things over?

Another big problem is that we certainly can not allow users to see the debugging page, so we need to sneak back door to our program settings.

Dynamic introduction of the code

There are two design ideas for reference:

1. In the program set up a back door somewhere. Click the press 10 or 10 seconds after the introduction of the code automatically.
2. VConsole introduced by dynamic operating environment. That is in the testing phase is introduced, while the production environment is not introduced into the code.

Set back door

Somewhere in the program set at 10 seconds automatically incorporated length codes.

First, press the effect of 10 seconds required three events combined to produce.

• @touchstart: Press start
• @touchmove: the process of moving Chang
• @touchend: End Press

Binding events

The following code, the introduction of these three events on the label:

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

Corresponding method:

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

Which touchStart, touchMove, touchEnd method import files come in from the outside, to facilitate unified management, of course, in fact, can also be implemented directly in this file.

Press 10 seconds

First, what is meant by a long press for 10 seconds. After touchstart then start counting 10 seconds it is certainly not called by 10 seconds long, so called after the click 10 seconds. Press 10 seconds should be the finger touches for 10 seconds, and can not trigger touchmove touchend event periods.

So the idea should be, touchstart start time, if triggered during touchmove and touchend event will reset the timer:

let timeOutEvent = null;

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

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

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

In the longPressprocess to dynamically introduced 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);
}

Thus, we implanted a backdoor in the program, needs to be debugged when needed only 10 seconds long press, vConsole came out.

According to the introduction of dynamic environment

If you want a little strict, we do not want users to see the debugging button at any time, then can be introduced vConsole depending on the environment (env).

Like turn commentary is the greatest encouragement