82

Safari/Chrome调试WebView

 5 years ago
source link: http://www.cocoachina.com/ios/20181122/25552.html?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

前言

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

WebView

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

Safari

开启开发菜单

Safari -> 偏好设置

6fY3ieZ.png!web

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

YZRRJjm.png!web

设备的Safari调试

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

AvAbU3N.png!web

选择要调试的网页

在App内打开对应的Webview

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

jY3y2iq.png!web

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

iIfqYfq.png!web

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

VVfIbej.png!web

添加 localhost:9000

V7bqauQ.png!web

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

J7bUr2E.png!web

点击inspect,就可以用Chrome进行调试了:

MJvqQjF.png!web

--------------------- 

作者:黄文臣 

原文:https://blog.csdn.net/Hello_Hwc/article/details/80721246 


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK