2024-06-27-【工程化】H5真机调试

前言：vConsole 是一个比较好的 H5 真机调试方法，但在真机上操作可能没那么顺手。这里提供一个适用于安卓、苹果真机打开 H5 页面，在开发机上远程调试的方法。毕竟方法多多益善

安卓手机和 Chrome 浏览器

1. 移动端设备设置 - android

• 1.1 打开 设置，开启开发者模式，打开 USB 调试（设置 > 开发者选项 > USB调试）
• 1.2 USB/typec 连接移动端设备
  
• 1.3 需要设备已安装 chrome 浏览器

2. 开发机设置 chrome

• 2.1 打开 chrome，访问 chrome://inspect/#devices
• 2.2 点击需要调试的页面 inspect
  
• 熟悉的调试界面就来了
  

苹果手机和 safari 浏览器

1. 移动端设备设置 - IOS

• 打开 设置-> 找到 Safari 浏览器-> 最底部 “高级” -> 勾选 “网页检查器”&Javascript
  

2. 开发机设置 - mac safari

• 2.1 开启 safari “开发”功能
• 打开 safari，safiri 浏览器 -> 设置
  
• 高级 -> 勾选“显示网页开发者功能”
  
• 2.2 USB/typec 连接移动端设备 -> 信任
• 2.3 打开 safari -> 开发 -> 找到移动设备 -> safari 浏览器已打开的页面
  
• 熟悉的调试界面就来了