我的webview调试工具

本人工作平台mac,以下全部针对mac平台

Charles

http抓包

  • proxy>proxy settings 设置代理端口

  • 手机设置代理连到端口上

  • 手机里的所有请求都能被charles抓到

https抓包

  • proxy>SSL proxy settings 设置要代理的域名,默认端口443

  • proxy>proxy settings 设置代理端口

  • 手机连到端口上

  • 手机浏览器打开
    https://charlesproxy.com/getssl

下载安装证书

  • 接着可以访问配置域名的具体请求

拦截请求,修改返回数据

  • 连接上代理,访问页面

  • 右击域名,点击breakpoints

  • 再次访问页面

  • charles会停留在返回数据界面,等待进一步操作

Spy-debugger

spy-dbugger是一款一站式页面调试、抓包工具。使用方便,一行命令就能启动。详见Spy-debugger

safari调试ios webview

调试iPhone浏览器页面

  • iphone在设置>safari>高级web检查器打开

  • iphone连接mac

  • iphone safari 随便打开一个页面

  • 在mac safari 开发>xxx的iPhone选项中,可以检查到iphone safari打开的页面,点开就可以对该页面进行进一步的调试。

调试app webview

  • 原材料:simulator、app、mac safari

  • simulator在设置>safari>高级web检查器打开

  • 在xcode simulator中安装app,如何在simulator安装app。我是直接拿到源码在xcode里build

  • 这个时候在simulator打开app里的webview就会被mac safari检查到。

  • safari在开发>simulator中,就能看见你打开的webview

  • safari是默认支持surce map的,所以你还可以对源码进行断点调试

  • (记得webpack devtool设置成为'source-map',如果是'cheap-module-source-map'或者其他设置,要么断点位置不对,要么就是直接看不到源码,这个涉及到不同devtool在不同浏览器中的表现,下次更)

ios_webkit_debug_proxy

如果你觉得safari调试用的不习惯,还是喜欢chrome调试,就需要ios-webkit-debug-proxy

安装启动

#安装
brew install ios-webkit-debug-proxy

#启动
ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

(note:启动的时候,要先打开simulator,再启动ios-webkit-debug-proxy

访问页面

  • simulator打开一个app的webview

  • chrome浏览器打开http://127.0.0.1:9221

  • 点击要打开的页面

  • 如果下方有'block'提示,点击页面后,去控制台再点击一下页面链接

  • 如果页面没有出现,需要重启一下app,只有页面走网络传输的时候,才能被监听到,需要让页面再传输一次,被监听到

  • 接下来就可以用你熟悉的调试界面查看webview了

相关推荐