2021年如何从Windows端使用devtools调试iOS设备上的网站

以下是实测可正常使用的三种方案，可根据你的调试需求选择：

方案1：Chrome跨设备远程调试（最接近原生调试体验，适合全量调试） #

• 前置准备：
  • iPhone和Windows/Linux设备连接同一局域网
  • iPhone端安装Chrome浏览器，提前打开需要调试的目标网页
  • 电脑端安装Chrome或Edge浏览器
• 操作步骤：
  1. 打开iPhone系统设置，下拉找到Chrome应用，开启「允许远程调试」权限
  2. 电脑端打开Chrome/Edge，地址栏输入chrome://inspect（Edge对应输入edge://inspect）
  3. 勾选页面中的「Discover network targets」选项
  4. 等待3-5秒，设备列表会自动识别到你的iPhone及当前打开的网页标签，点击对应标签的「inspect」按钮即可调出完整调试面板，支持元素审查、控制台日志查看、网络请求分析、断点调试等全部PC端调试功能

方案2：代理工具+移动端页内调试脚本（适合需要修改资源调试的场景） #

• 前置准备：
  • 电脑端安装Charles或Fiddler抓包代理工具
  • 两台设备连接同一局域网
• 操作步骤：
  1. 打开电脑端代理工具，记下本地IP和代理端口
  2. iPhone连接对应WiFi，在WiFi详情中配置手动代理，填入电脑的IP和代理端口，根据代理工具提示安装根证书，并在iPhone「设置-通用-关于本机-证书信任设置」中开启对应证书的完全信任
  3. 若需要查看页面控制台日志、调试前端逻辑，可在目标页面头部嵌入vConsole或Eruda类移动端调试脚本，页面加载后iPhone端会出现悬浮调试按钮，可直接在手机端查看日志、修改DOM
  4. 若需要修改线上资源验证效果，可通过代理工具将线上的JS/CSS/HTML资源映射到本地修改后的文件，iPhone访问页面时会自动加载本地资源，实时验证修改效果

方案3：iOS端独立调试APP（轻量调试无需连电脑） #

直接在App Store安装Inspect Browser，用该浏览器打开目标网页即可直接调用内置调试能力，支持元素审查、网络请求抓包、存储内容编辑、控制台日志查看等基础调试功能，适合临时快速调试的场景。

内容的提问来源于stack exchange，提问作者italodeandra