前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Safari/Chrome调试WebView

Safari/Chrome调试WebView

原创
作者头像
conanma
修改2021-06-08 18:15:20
1.4K0
修改2021-06-08 18:15:20
举报
文章被收录于专栏:正则

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进行调试了:

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档