混合开发h5调试

我们在做混合开发时，一般在开发H5页面时，大多都是使用谷歌浏览器的手机模式开发调试，但其与真机还是有差别的

比如：border-radius:50%在安卓手机中不圆，以及软键盘弹起遮挡输入框，等一系列机型兼容性问题，需要反复调试

我们就可以将手机与电脑连接，在电脑上本地开发调试，在手机浏览器里实时预览

一、电脑端本地起项目：npm run serve

二、关闭mac电脑防火墙，系统偏好设置 => 安全性与隐私 => 防火墙（window电脑自行百度）

三、原生数据线连接电脑和手机（较麻烦），或者连接同一个局域网（这个最方便）

四、手机浏览器直接访问：http://192.168.2.119:8080/ （192.168.2.119是电脑ip地址，可通过ifconfig查看）

效果图：

H5有些逻辑是需要与底座（原生ios或android）进行交互通信的，这样的话在手机调试模式（PC浏览器），是无法正常开发交互的，需要在app里调试

或者需要排查线上环境的bug，此时需要像PC浏览器一样打开控制台，来调试

解决方案：vconsole调试工具

官方github地址：https://github.com/Tencent/vConsole/blob/dev/doc/tutorial_CN.md

官方demo：http://wechatfe.github.io/vconsole/demo.html

特性：

1. 安卓和ios的手机都可以用

2.H5页面（包括混合式App的内嵌H5页面）

3.查看console日志、网络请求、页面element结构、cookies、localStorage、sessionStorage

4.console的相关打印可以直接使用，插件还提供其它多样化的输出信息

引入方式：2种

1：直接在index.html里使用script引入

<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
<script>
    new VConsole();
</script>

2：在main.js里引入

npm install vconsole

// 在main.js中
import VConsole from \'vconsole\' //引入
new VConsole() //初始化

效果图：

如果是线上的正式环境，打开vconsole调试工具就不太好了（不过可以通过判断用户，只给自己加vconsole，哈哈）

如果只是想排查接口数据的话，可以通过抓包工具

这里介绍 Fiddler Everywhere

官方下载源：https://downloads.getfiddler.com/win/Fiddler%20Everywhere%201.5.1.exe

特性：

1、fiddler everywhere 和 fiddler 功能都差不多，但是比 fiddler 多了一些postman的功能

2、运行在任何浏览器，任何系统、跨平台（Windows、Mac、Linux）的一款Web调试代理工具

3、记录了计算机和Internet之间的所有HTTP（S）通信，可以检查和编辑通信，并Mock请求以及修改响应返回的能力

一、首先下载安装，然后注册账号

（打开后，默认会要求登录Telerik家的账号，如果没有，还是建议注册一个，这个账号的一个主要作用，是能同步你的数据，后面会发挥作用，建议不要拒绝）