微信小程序中的 H5 页面 如何调试？
一、场景：
业务中要做一个微信小程序，有上传大文件的需求(需要上传完整操作视频，一般都有几百M-上G)。因为用微信小程序大文件上传库（miniprogram-file-uploader），依赖 FileSystemManager.readFile，这个API读取单个本地文件最大限制是100M，所以无法满足业务场景。为了实现这个业务需求，上传大文件的这个功能，就用了 H5 做实现。 然后出现了 小程序中打开 H5 的业务场景。
二、问题：
那当 H5 页面开发完毕，运行在小程序中后，我们还怎样调试这个 H5，看到这个 H5 的 dom元素、css、接口请求 等等 信息呢？就像我们在电脑的 chrome、edge、safari 浏览器中开发时那样
三、方法：
方法一、vConsole
一个轻量、可拓展、针对手机网页的前端开发者调试面板。
使用它 可以在手机微信小程序中的 H5 页面上 点开查看，类似下图：
使用方法：
// 也可以下载下来放到自己工程里
<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
<script>
const vConsole = new VConsole();
</script>
或者 import 到工程里使用
import VConsole from 'vconsole';
const vConsole = new VConsole();
方法二、微信开发者工具 + 小虫子图标（打开 webview 调试页 按钮）
1、下载并安装 微信开发者工具
微信官方下载
developers.weixin.qq.com/miniprogram…
安装成功后：
2、微信扫码登录 微信开发者工具
这里需要是在 在微信公众平台配置了开发者权限 微信账号扫码登录。可以把自己的账号配置开发者权限，或者让有权限的人帮忙扫码
3、把本地小程序添加到开发者工具中。
3.1、在小程序项目中 点击 + 号，创建小程序
3.2、填写项目名称、目录（小程序本地启动，编译后的目录，如：/Users/xxx/www/test-mini/dist）、AppID（小程序对应的 AppID），点击确定
3.3、之后即可看到已添加的小程序，点击打开
3.4、即在开发者工具中打开了小程序。在工具面板中，右侧是小程序的调试器（Console、Sources、Network 等等）
3.5、那么，H5 的调试器 从哪里打开呢？在工具面板的下方，小虫子 图标（打开 webview 调试页）
3.6、当 打开 H5 页面后，点击 下方的 小虫子按钮，开启 webview 的调试器，会弹出一个新窗口，来查看 H5 页面的 Elements、Console、Sources、Network、Application 等信息（就是我们熟悉的调试页面了）
