Teemwu's blog

Appearance

目录

H5页面真机调试方法整理 ​

真机调试在很久之前的随笔里有写过，因为最近需要真机调试微信上的页面，发现之前有些方法不管用了，所以现在重新整理下。下面主要介绍两种调试工具。

spy-debugger ​

现在用得比较多的调试工具是 spy-debugger，因为它不需要通过 USB 线来连接，相对来说会方便点。但需要在手机上安装证书才能进行真机调试，有些手机安装证书很麻烦甚者还安装不了证书的就不推荐这种方式了。下面简单介绍下其安装使用，具体可到 Github 上查看具体文档。

安装

bash
npm install spy-debugger -g
bash
sudo npm install spy-debugger -g

安装完成后可以直接启动进行调试

bash
spy-debugger

调试前需要注意几点：

  1. 手机和电脑必须在同一网络下
  2. 手机上手动设置代理（IP 填写电脑 IP 地址，端口默认使用 9888）
    • Android：设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动
    • IOS：设置 - 无线局域网 - 选中网络 - HTTP 代理手动
  3. 手机证书安装。注：手机必须先设置完代理后再通过(非微信)手机浏览器访问 http://spydebugger.com/cert（手机首次调试需要安装证书，已安装了证书的手机无需重复安装)。iOS新安装的证书需要手动打开证书信任，设置->通用->关于本机->证书信任设置-> 找到node-mitmproxy CA（打开）
  4. 手机浏览器访问要调试的页面即可

Chrome DevTools ​

如果手上是 android 手机并且刚好手上有数据线可以连接手机和电脑，可使用此方法。

  1. 在 Chrome 浏览器访问 chrome://inspect/#devices
  2. 用数据线连接你的手机和电脑，并且手机上需要在设置里开启 USB调试
  3. 允许 USB 调试后，在手机上访问要调试的页面，chrome 就会显示对应的页面地址
  4. 开启科学上网后，点击对应页面下面的 inspect 等待弹出页面就可以开始调试了