PC上调试移动端页面

[NoName4Me]

debug

浏览器调试

Safari

• Mac: Safari 偏好设置 --> 高级 --> 勾选「在菜单栏中显示“开发”菜单」
• iPhone: 设置 --> Safari 浏览器 --> 打开 Web 检查器

数据线连接，Mac Safari 的开发菜单下会看到 iPhone 上 Safari 当前打开的页面

Chrome

移动端 Chrome + PC Chrome

通用调试

iOS

都在 Chrome DevTools 里进行。

安装 remotedebug_ios_webkit_adapter

支持:

brew update
brew unlink libimobiledevice ios-webkit-debug-proxy usbmuxd
brew uninstall --force libimobiledevice ios-webkit-debug-proxy usbmuxd
brew install --HEAD libimobiledevice
brew install --HEAD usbmuxd
brew install --HEAD ios-webkit-debug-proxy

npm install remotedebug-ios-webkit-adapter -g

# 启动
remotedebug_ios_webkit_adapter --port=9000

# 访问
chrome://inspect/#devices

Android

设置里启用开发者模式（如果是要调试 webview，选择要调试的 APP），USB 连线，允许调试，chrome 访问 chrome://inspect/#devices

通用抓包

Charles

愧对开发者的操作（破解）: https://www.zzzmode.com/mytools/charles/

tips: Mac: CMD+Shift+G，输入 /Applications/Charles.app/Contents/Java

配置 + 使用:

1. 只抓手机端的包，所以在 Proxy 菜单下取消勾选 macox Proxy
2. Proxy 菜单下进入 Proxy Settings
3. 设置端口（默认 8888 即可），勾选 「Enable transparent HTTP proxying」
4. 手机端设置代理就可以抓包
5. Help 菜单下 SSL Proxying --> Install Charles Root Certificate on a Mobile ... 按照步骤在手机上安装证书
6. Proxy --> SLL Proxying Settings 中添加需要激活 SSL 代理的域名/端口

利用 Charles 调试线上代码（线上哦）

右键某个请求，选择 Map Local...，Map To 里选择本地文件，刷新页面，该请会返回本地的映射文件。

对于线上代码，比如要加一些调试信息，可以右键某个请求，选择 Save Response...（注意扩展名），存储到本地，然后修改保存的文件，增加调试信息，设置 Map Local，然后刷新页面。

其它工具

• spy-debugger: https://github.com/wuchangming/spy-debugger

---

参考

1. remotedebug-ios-webkit-adapter: https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter