[TOC]
移动端前端开发经常会遇到在模拟器下没问题。一到真机就会各种问题，比如说微信内部调试h5。真机调试没有像PC 端一样方便，需要借助各种工具来实现，下面就列举下，我在项目中常用的一些调试方法。
安卓
安卓需要在 开启开发者模式。国内各种定制系统的开启方法不一致。具体的请使用google 或者 baidu 查询。
以原生android11 系统为例：
设置 -> 关于手机 -> 版本号 点击5次 输入PIN 密码 即可开启`
设置 -> 系统 -> 高级 -> 开发者选项 -> USB 调试 开启。
数据线连接安卓手机 -> 允许USB 调试
安卓11后默认支持无线调试，具体方法参考安卓11无线调试， 安卓10以下参考谷歌文档。
进行调试前，前完成以上准备。
浏览器场景
使用工具chrome inspect, 这是一个调试的神器，能解决大部分场景的调试问题。还可以配合其他工具应对一些特殊的场景。
常用的浏览器webkit 内核浏览器都可以使用此种方法。
打开手机浏览器输入网址打开网页
打开电脑 Chrome 地址栏输入chrome://inspect
点击inspect
控制台可以正常开始调试了（模拟器会屏蔽一些用户操作交互，比如点击事件，需要你操作真机，模拟器会同步的）
X5内核类
当然还有些场景是在APP内部比如说是微信内部的网页调试，或者是hybrid应用开发（X5内核类）。
:one: 在使用x5内核的app内打开X5调试
:two: 选择信息Tab，勾选打开Tbs内核inspector调试功能，打开vconsole调试功能。
:three: 重启APP
:four: 打开APP内任意一个h5页面， 如果出现vconsole就算成功。
:five: 手机链接电脑，方法参考准备工作。
当您连接搭载 Android 4.2.2 或更高版本的设备时，系统会显示一个对话框，询问您是否接受允许通过此计算机进行调试的 RSA 密钥。这种安全机制可以保护用户设备，因为它可以确保只有在您能够解锁设备并确认对话框的情况下才能执行 USB 调试和其他 adb 命令。
:six: 电脑打开chrome, 地址栏输入chrome://inspect, 等待你的设备显示，找到需要调试的webview， 点击inspect
这一步可能比较慢，如果打不开可以考虑使用代理。
IOS
ios 移动端调试原则上建议直接使用mac safari 调试简单易操作。
windows调试ios
:one: 安装依赖
在windows 上调试的话要依赖第三方的工具。具体准备如下：
- iTunes(微软商店)
- ios-webkit-debug-proxy(需要使用scoop安装)
- remotedebug-ios-webkit-adapter（npm安装）
- chrome
:two: iphone 开启 Web Inspector
设置位置
设置 - Safari浏览器 - 高级 - 网页检查器 开启
:three: 连接iphone
通过USB连接电脑，启动iTunes可能会提示“信任此计算机”对话框。信任就可以了。
:four: 启动ios-webkit-debug-proxy
命令行输入
remotedebug_ios_webkit_adapter --port=9000
:five: 打开Chrome DevTools
打开chrome浏览器地址栏输入chrome://inspect/#devices, 在手机safari打开网页，等待片刻就可以在chrome devTools 看到的网页了，点击下方的inspect 即可。
MAC调试ios
:one: 开启mac safari 的开发菜单
:two: 连接 打开mac电脑的safari 浏览器
跨平台通通用JS 注入类
此类都是通过插入dom, 模拟调试工具，使用起来也比较简单，引入js, 初始化就可以了。
Vconsole
现在用的最多的应该是腾讯的Vconsole, 小程序内置的也是这个，基本的功能都可有。但是有时候Network查看响应数据滚动会有一下bug。Dom 面板查看dom树不好用
支持插件 Vconsole 文档地址
Eruda
功能更齐全一点，但是资源会更大一点，DOM Network 的使用体验更好。还有一些开发的功能，显示所有边框，刷新页面（APP 内调试方便），一些H5 新接口的测试等等 支持插件，扩展更多功能 Eruda
weinre
推荐chii， 可以完全替代
weinre这个比较早了，最早的微信网页调试工具内置的调试工具就是这个。设置相对麻烦，但是可以通过局域网连接电脑调试手机页面。这个很久不维护了，而且chrome://inspect, 体验比这个好太多了。
weinre
chii
类似weinre 的远程调试工具，用最新的chrome devtools 前端取代 web 检查器，这个devtool跟chrome几乎一样，没有什么学习门槛。
- 使用方法也很简单，开法本地电脑全局安装chii, 然后启动
# 安装
npm install chii -g
# 启动
chii start -p 8080
- 然后将脚本注入到html中，以vue项目为例调试时候可以直接写死script标签到html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta
name="viewport"
content="telephone=yes, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no, minimal-ui"
/>
<title></title>
</head>
<body>
<!-- 添加这一行代码 -->
<script src="http://本机IP:8080/target.js"></script>
<div id="app" style="height: 100%"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
- 电脑打开localhost:8080，找到需要调试到页面inspect即可
更多用法参考官网chii
拓展
Electron 应用调试方法
最新方法
Electron 浏览器窗口中的 DevTools 只能调试在该窗口（即网页）中执行的 JavaScript。要调试在主进程中执行的 JavaScript，您需要使用外部调试器并使用--inspect或--inspect-brk开关启动 Electron。
使用以下命令行开关之一启用主进程的调试：
命令行
--inspect=[port]
Electron 将在指定的 上侦听 V8 检查器协议消息port，外部调试器将需要在此端口上连接。默认port值为 5858.
electron --inspect=5858 your/app
--inspect-brk=[port]
跟 --inspect 一样，只不过会在js的第一行断点，暂停执行
外部
您将需要使用支持 V8 检查器协议的调试器。 chrome://inspect通过访问并选择检查已启动的 Electron 应用程序来连接 Chrome 。
已废弃
--remote-debugging-port=9222
移动端抓包工具实践
Fiddler
Charles
常见问题
1. Mac os （big sur 11.4） Safari （11.4.1）网页检查器调试只显示控制台 来源 审核菜单。
解决方法：safari版本有问题需要下载最新的预览版本 Safari Technology Preview
参考链接： Safari Web Inspector tabs are missing
2. Safari 远程调试移动端webview, 找不到 待调试页面
解决方法： 再次确认手机上的safari 高级设置中的网页检查器 是否开启。
如果已经开启，那就是原生打包的设置禁用了调试，在Build Settings 中Provisioning Profile中设置了xxx_dis发布版， 需要原生给你重新打包，将改设置修改为xxx_dev或者automatic, 重新安装， 就可以正常调试了。
3. chrome inspect 一直不出现设备。
解决方法： 一般由于网络原因引起，需要使用代理，可以访问google即可。无法访问的推荐使用edge浏览器，所有操作一致，访问edge://inspect 即可
