Mobile terminal development, the most trouble is debugging, in the development process can be conducted on PC debugging, there was a problem but on a real machine operation, debugging is on the phone, because the mobile end without the PC developer tools, so the debugging up more troublesome, combined with my actual development experience h5 real machine debugging are summarized in several ways:

1, vconsole

Used to view information such as console, cannot modify the web page, also cannot debug breakpoints

Usage method 1: introduction

<script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js? V = 3.2.0"></script>
    <script>
        // init vConsole
        var vConsole = new VConsole();
        console.log('Hello world');
    </script>
Copy the code

Usage method 2: Install dependencies

Run NPM I vconsole

In vue, for example, it is introduced globally in the main.js file

import Vue from 'vue'
import Vconsole from 'vconsole'

if(process.env.NODE_ENV ! = ='production') { // Test and development open, production not open
  let vConsole = new Vconsole()
  Vue.use(vConsole)
}
Copy the code

2. Inspect Device page of PC browser

You can debug the H5 page on the PC browser, and the page runs in the real computer environment. You can debug the developer tool in the PC browser, which provides the same experience as debugging the PC page. You can view information, change the page, and debug the page

Usage:

1. Connect the data cable to the computer

Edge ://inspect/# Devices

If Remote Target does not show a link to the phone, you need to open developer mode on the phone and the page chrome://inspect/# Devices will show the linked phone and open the WebView page. If the following page appears, click Inspect.

3. After clicking, a new page will be opened. If the current page appears, it means that it is normal

Note that you should avoid using Chrome as much as possible, because for obvious reasons, chrome will 404, so using Edge is normal

3, Alert method

For a variable, you can use alert to pop up the value on the phone. You can also add a script tag at the top of the HTML file with the following code

window.onerror = e= > {

        alert('Error occurred' + e)

      }
Copy the code

4. Code addition and deletion debugging

For errors where you know the approximate location, you can use local code additions and deletions to see the effect of debugging