移动端真机调试方案

移动端开发，最麻烦的就是调试，在开发过程中可以在pc上进行调试，但是在真机上运行时出现问题，就要在手机上调试，由于移动端没有pc端的开发者工具，所以调试 起来比较麻烦，结合我的实际开发经验总结了h5真机调试的几种方式:

1、vconsole

用来查看console等信息的，无法对网页进行修改，也无法进行断点调试，无法查看bug在源文件中的位置

使用方法一：引入

<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>

使用方法二：安装依赖

执行 npm i vconsole

比如在vue 中，在main.js 文件中全局引入

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

if (process.env.NODE_ENV !== 'production') { // 测试和开发打开，生产不能打开
  let vConsole = new Vconsole()
  Vue.use(vConsole)
}

2、pc浏览器inspect device页面

可以在pc浏览器上调试h5页面，页面运行在真机环境，调试放在pc浏览器的开发者工具， 跟调试pc页面一样的体验，既可以查看信息，也可以改动页面，还可以debug，也可以在console中看到bug在源文件中的位置

使用方式：

1.数据线链接电脑

2.电脑打开链接 edge://inspect/#devices 会看到如下界面

如果Remote Target这块没有出现手机的链接，需要在手机上打开开发者模式 然后页面chrome://inspect/#devices中就会出现链接的手机，然后打开webview的页面。如果出现如下页面，点击inspect即可。

3、点击之后会打开一个新的页面，如果出现当前页面就说明正常了

需要注意的是,尽量不要用chrome,由于大家都懂的原因，用chrome会404，使用edge就是正常的

3、alert大法

对于某个变量可以使用alert在手机上弹框显示值 还可以在html文件顶部去添加script标签加上如下代码

window.onerror = e => {

        alert('发生错误' + e)

      }

4、代码增删调试

对于知道大致位置的错误，可以采用局部增删代码的方法查看效果调试