Safari/Chrome调试WebView

栏目: IOS · 发布时间: 7年前

内容简介:最近在写《iOS代码调试》系列的博客,估计会有十篇以上的内容,等到都写完了会在Github以一个仓库的形式开源出来,欢迎关注我的Github:大多数App会选择H5去实现某些弱交互但是却需要热更新界面,这时候WebView就派上用场了,那么如何对WebView进行调试呢?Safari -> 偏好设置

前言

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

WebView

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

Safari

开启开发菜单

Safari -> 偏好设置

Safari/Chrome调试WebView

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

Safari/Chrome调试WebView

设备的Safari调试

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

Safari/Chrome调试WebView

选择要调试的网页

在App内打开对应的Webview

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

Safari/Chrome调试WebView

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

Safari/Chrome调试WebView

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

Safari/Chrome调试WebView

添加 localhost:9000

Safari/Chrome调试WebView

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

Safari/Chrome调试WebView

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

Safari/Chrome调试WebView

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

作者:黄文臣 

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

图解CIO工作指南(第4版)

图解CIO工作指南(第4版)

[日] 野村综合研究所系统咨询事业本部 / 周自恒 / 人民邮电出版社 / 2014-3 / 39.00

《图解CIO工作指南(第4版)》是一本实务手册,系统介绍了企业运用IT手段提高竞争力所必需的管理方法和实践经验,主要面向CEO或CIO等企业管理人士。 《图解CIO工作指南(第4版)》分为三个部分。第1部分的主题为IT管理,着重阐述运用IT技术提高企业竞争力所必需的所有管理业务,具体包括制定作为企业方针的IT战略,以及统筹执行该战略时与IT相关的人力、物力、财力、风险等要素在内的一系列管理业......一起来看看 《图解CIO工作指南(第4版)》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

MD5 加密
MD5 加密

MD5 加密工具