我的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设置成为&＃8217;source-map&＃8217;,假如是&＃8217;cheap-module-source-map&＃8217;或许其他设置，要么断点位置不对，要么就是直接看不到源码，这个涉及到差别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

• 点击要翻开的页面

• 假如下方有&＃8217;block&＃8217;提醒,点击页面后，去控制台再点击一下页面链接

• 假如页面没有涌现，须要重启一下app，只要页面走收集传输的时刻，才被监听到，须要让页面再传输一次，被监听到

• 接下来便可以够用你熟习的调试界面检察webview了