H5调试 有下面几种方式
1、web 浏览器
Chrome Remote Devices
依赖 Chrome 来进行远程调试，适合安卓手机。
-
开启
Android手机的「开发者选项」，勾选 「USB 调试」 -
打开浏览器输入chrome://inspect/#devices ，勾选「发现USB」
-
在edge浏览器里，输入chrome://inspect，跳转到edge://inspect页面，点击了inspect按键就可以成功映射手机端webview页面
Safari 开发
依赖 Safari 来进行远程调试，适合iOS手机
-
iOS手机: 设置-Safari-高级-web检察器
-
Mac电脑: Safari-偏好设置-在菜单显示开发
-
手机打开网页，连接电脑;
Mac电脑: 开发-展示手机，点击即可映射手机页面
2、vConsole
介绍： vConsole插件是一个移动端轻量可扩展的工具，其功能和电脑端的控制台基本一致，能运行JS代码、查看cookie、抓包等
使用： 在head中添加如下代码即可
<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
<script>
// 初始化
var vConsole = new VConsole();
console.log("hello vconsole");
</script>
3、抓包工具
Whistle
spy-debugger
一站式页面调试、抓包工具。远程调试任何手机浏览器页面，任何手机移动端webview（如：微信，HybridApp等）。支持HTTP/HTTPS，无需USB连接设备
stream
ios手机端抓包工具
charles
fiddler
wireshark
偏低层
欢迎关注我的前端自检清单，我和你一起成长
