dailyLearning -- Safari/Chrome调试WebView

前言

最近在写《iOS代码调试》系列的博客,估计会有十篇以上的内容,等到都写完了会在Github以一个仓库的形式开源出来,欢迎关注我的Github:

WebView

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

Safari

开启开发菜单

Safari -> 偏好设置

20180617214445705.png

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

20180617214508815.png
设备的Safari调试

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

20180617214525386.png
选择要调试的网页

在App内打开对应的Webview

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

20180617214618632.png

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

20180617214545793.png

对于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-adapter

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

转载:Safari/Chrome调试WebView

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,598评论 25 708
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 12,991评论 2 59
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,019评论 3 119
  • 01 男:你好,路上有点堵车,不好意思,这朵花是送给你的。女:没关系,你是开什么车来的。男:我没有车。女:那我们不...
    e19c0228dcb3阅读 457评论 0 0
  • 问题1: library not found for -lstdc++.6.0.9 Xcode10把libstdc...
    fruitymoon阅读 1,773评论 1 0