Safari/Chrome调试WebView

WebView

大多数App会选择H5去实现某些弱交互但是却需要热更新界面，这时候WebView就派上用场了，那么如何对WebView进行调试呢？

Safari

开启开发菜单

Safari -> 偏好设置

勾选“在菜单栏显示开发菜单”

设备的Safari调试

设置 -> Safari -> 高级 - > 开启Web检查器

选择要调试的网页

在App内打开对应的Webview

状态栏点击开发 -> 选择设备 -> 选择网页

然后，就可以通过safari调试这个网页了

对于iOS原生开发来说，用的做多的还是终端，比如你要测试一个WKWebView的JSBridge

window.webkit.messageHandlers.bridgeName.postMessage({//data..})

或者测试一个scheme

window.location.herf="xxxxx"

建议iOS开发者学习一些JS的基本知识，这会对调试WebView大有帮助。

Chrome调试

Chrome调试比较适合写H5的同学，因为在这里可以使用类似React/Redux等插件来提高效率。

准备工作：

开启iOS设备中Safari设置的WebContent检查器

确保手机被系统信任

安装：ios-webkit-debug-proxy

brew install ios-webkit-debug-proxy

安装：remotedebug-ios-webkit-adapte

npm install remotedebug-ios-webkit-adapter -g

运行adapter:

remotedebug_ios_webkit_adapter --port=9000

接着，在App中打开包含WebView的应用，然后chrome打开如下地址

chrome://inspect/#devices

点击config

添加localhost:9000

然后，就能够看到刚刚应用中的WebView了

点击inspect，就可以用Chrome进行调试了：