这是我参与2022首次更文挑战的第19天，活动详情查看：2022首次更文挑战」。 我们做H5k开发确实对于一个问题能够通过控制台直接打印出来，在开发阶段使用控制台模拟器解决，调试测试很速度，但是页面发到线上一旦出现问题，我们就很难解决，因为缺乏可视化的界面。不似在PC端，我们能直观的去改变样式，或者是进行断点调试。
1.使用VConsole
VConsole是一个简单的开源debug库，使用方式很简单，提供js和npm包格式
1.1 使用script形式
注意使用的时候初始化在页面最前面，这样保证有请求之前都加载了vConsole
<script src="path/to/vconsole.min.js"></script>
1.2 使用npm 包形式
import VConsole from 'vconsole';
let vConsole = new VConsole();
效果，点击右下角的绿色条用于测试network,console等打印
1.2 项目集成方式
项目初始化的时候就将vconsole集成进去，通过url加参数的形式初始化vconsole，这样方便线上url调试，局限性是无法排查js报错，element,css数据，通过结合以下说到的mobile debug可以更加准确的排查所有bug
2.使用whistle
- 启动代理服务器。
依托node，全局安装whistle，通过 whistle start 命令启动。
- 浏览器设置代理服务器，用于显示抓包调试内容。
目前仅限chrome浏览器。推荐使用switchOmega插件。主要需要配置ip地址和端口号。
- 手机wifi设置代理服务器。
网上有个说法说得很好，代理的意思就是我喝咖啡打给店给我送过来，有一天店里电话忘记了，我就让一个经常喝咖啡的朋友帮我叫店里送过来。
3.使用mobile debug
3.1配置ios
- 配置代理端口
通过配置此端口代理，等会儿在手机端和PC端连入同一个wifi中，这个时候手机手动配置代理到PC的此端口，mobile debug即可进行网页调试
- 接入ios设备
点击右上角接入新设备
- 手机和PC端在同一局域网
4. 配置手机代理
5. 扫码安装根证书
5. 手机请求在网页抓包进行调试
3.2配置android
- 同一局域网
- wifi
- 安装根证书
- 网页调试
