H5页面 真机调试（win10）

做企业微信的网页应用已有一年的时间，期间踩过很多坑，调试问题是最开始跳入的坑。

安卓真机调试

前提：在手机chrome浏览器上打开需要调试的H5页面

1. 用数据线将电脑和手机连接起来

2. usb调试：打开 设置 -> 开发者选项 -> USB调试，确保手机和电脑连接成功
   

   

   image.png

3. 在chrome浏览器url上输入chrome://inspect
   

   

   打开inspect.png

4. 点击inspect，则可进行调试
   
   

   调试页面.png
   
   另外：由于笔者写的H5页面是嵌套在企业微信app内，所以需要在该APP内输入http://debugx5.qq.com，在打开的信息网页中点击：信息 -> 选择Inspector调试功能 -> 重启。
   
   

   微信页面调试.png

苹果手机调试

前提：在手机safari浏览器上打开需要调试的H5页面

1. 用数据线将电脑和手机连接起来

2. 手机：设置->Safari->高级->Web 检查器
   

   

   web检查器.png

3. 打开Powershell终端，安装调试所需要的依赖

• 安装scoop

#安装scoop
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

#若安装失败，执行命令
Set-ExecutionPolicy RemoteSigned -scope CurrentUser

• 安装ios-webkit-debug-proxy

scoop bucket add extras
scoop install ios-webkit-debug-proxy

4. 启动ios-webkit-debug-proxy，执行以下命令，成功后，则会出现连接到设备。

# 在Powershell中执行，-f表示指定前端工具，这里使用chrome-devtools进行调试
ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

连接成功.png

5. 在chrome浏览器url上输入chrome://inspect
   
   

   inspect.png
6. 点击inspect，则可进行调试（调试窗口不出现页面，这个不清楚什么问题）
   
   

   调试页面.png

以上就是相关调试。

相关文档：

---

https://www.jianshu.com/p/e23cb7d720fd
https://blog.csdn.net/ShaLiWa/article/details/60766248
https://www.jianshu.com/p/73715ee54712