iOS之Safari调试webView/H5页面
之前做过混合开发,用的是JavaScriptCore+OC+UIWebView。
Safari调试功能真的很有用,通过它可以轻松定位问题的所在,下面说说怎么调试.
开启Safari开发菜单
在Mac的Safari偏好设置中,开启开发菜单。具体步骤为:Safari -> 偏好设置… -> 高级 -> 勾选在菜单栏显示“开发”菜单。
iPhone开启Web检查器
具体步骤为:设置 -> Safari -> 高级 -> Web 检查器。
运行App
打开项目,Cmd + R 运行,打开想调试的Web页面。
调试对应的页面
打开Safari -> 开发 -> 设备 -> URL。
选中的页面会变成蓝色,点击然后打开了如下的界面。
这个页面就很像Windows
平台Chrome
的F12
。可以打断点:
查看断点
查看Cookie
打印Cookie或者元素
比如在这里Alert页面的title,输入 alert(document.title);
,你会在模拟器中看到弹窗
整体十分有用,操作的体验跟Xcode
很像,小伙伴们自行探索。
比如新做的h5页面中,有一个分享按钮,点击调用原生的分享,但是发现,点击之后没有反应了,什么问题呢?是Native端实现有问题,还是前端写的有问题呢?如图
我们来帮忙看下吧,打开Safari Web 检查器,定位到资源,并且在share方法中添加断点,如图
会发现,并没有断住,而是页面直接报错了,仔细查看错误描述,share方法里多了一个“/”
,因此报错了。当我点击分享按钮时
会发现,提示找不到变量share
。这里我需要说明一下:
当js中报错的时候,报错位置所在的函数以及报错位置之后的代码,都不会执行,所以我点击分享时,提示的是找不到方法,因为js的语法不对,报错了,这里解析不出来,所以也就没有了share
、testAddMethod
和之后的函数。
那么当我点击分享下面的按钮是,调用share下面定义的方法也就会提示找不到对应的函数了。
至此,问题找到了,只要告之前端开发人员即可,让他修复即可。
实际遇到的问题可能要复杂的多,可以通过断点,以及控制台打印一些js变量的值,DOM操作来寻找问题,解决问题。希望可以帮助到小伙伴们。
iOS之Safari调试webView/H5页面的更多相关文章
- iOS开发Safari调试WebView页面
App混合开发现已是常态,不过作为app端开发人员,对H5页面的使用,可不能简单的局限于使用,一些简单的调试方法还是有必要了解的. 关于如何在使用webview过程中,如何对web内对内容进行调试,这 ...
- webview h5页面 关闭
说明:在 ios 安卓 客户端上的h5页面执行完毕关闭h5页面 引入的js在文件中的xhdoctor_mobile.rar
- 谷歌浏览器chrome://inspect/#devices调试webview的页面和控制台布局错乱问题
谷歌浏览器chrome://inspect/#devices调试webview的页面和控制台布局错乱问题 : 谷歌浏览器的版本过高,选择60版本即可: 版本 60.0.3080.5(正式版本)
- ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法
一. 运行环境: iphone所有机型的qq浏览器,safari浏览器,微信内置浏览器(qq浏览器内核)等. 二. 异常现象: 1. 大幅度上下滑动h5页面,然后停止滑动,有时候会影响到页面滚动,如局 ...
- iOS之safari调试iOS app web页面
Overview 当下移动端开发过程中大量使用前段H5.js等等技术,而这些web页面的调试在Xcode控制台中不太明了,经常我们移动app运行了就是方法,但是不能显示响应的效果,这时候或许就是已经报 ...
- ios下app内嵌h5页面是video适配问题
ios下做新闻详情用h5页面实现然后打包到app中,其中新闻详情页会有视频,安卓下video的poster可以做到适应video大小,但是ios下会按照poster图片大小将video等比撑大,但是视 ...
- iOS使用Safari调试UIWebView
1.设置Safari "Safari"->"偏好设置"->"高级",勾选"在菜单栏中显示开发菜单" 2.设置 ...
- Appium Inspector定位Webview/H5页面元素
目录 操作步骤 Python操作该混合App代码 Appium在操作混合App或Android App的H5页面时, 常常需要定位H5页面中的元素, 传统方式是 翻墙 + 使用Chrome://ins ...
- safari 调试iPhone web页面
safari设置-打开Safari偏好者设置,选中“高级菜单”,在页面最下方看到“在菜单中显示开发菜单”的复选框,在复选框内打钩,这样设置完毕就能在Safari菜单中看到开发菜单了 iPhone 设置 ...
随机推荐
- 深入学习Motan系列(五)—— 序列化与编码协议
一.序列化 1.什么是序列化和反序列化? 序列化:将对象变成有序的字节流,里面保存了对象的状态和相关描述信息. 反序列化:将有序的字节流恢复成对象. 一句话来说,就是对象的保存与恢复. 为什么需要这个 ...
- 从npm 角度理解 mvn 的 pom.xml
从npm 角度理解 mvn 的 pom.xml pom -- project object model. 用于描述项目的配置: 基础说明 依赖 如何构建运行 类似 node.js 的 package. ...
- BEAM188简单应用
目录 BEAM188简介 APDL应用实例 显示梁三维图 BEAM188简介 BEAM188-3D线性有限应变梁 Beam188 单元适合于分析从细长到中等粗短的梁结构,该单元基于铁木辛哥梁结构理论, ...
- Java自定义类加载器与双亲委派模型
其实,双亲委派模型并不复杂.自定义类加载器也不难!随便从网上搜一下就能搜出一大把结果,然后copy一下就能用.但是,如果每次想自定义类加载器就必须搜一遍别人的文章,然后复制,这样显然不行.可是自定义类 ...
- python中的is和==
is和== Python中的对象包含三要素:id.type.value id方法的返回值就是对象的内存地址其中id用来唯一标识一个对象,type标识对象的类型,value是对象的值 is 判断的是a对 ...
- 第1章 Java语言概述--HelloWorld--环境搭建
SE学什么 第1章 Java语言概述 第2章 基本语法 第3章 数组 第4章 面向对象编程(上) 第5章 面向对象编程(中) 第6章 面向对象编程(下) 第7章 异常处理 第8章 枚举类&注解 ...
- Fabric的settings用法
http://fabric-chs.readthedocs.io/zh_CN/chs/api/core/context_managers.html?highlight=with%20settings# ...
- centos7 设置时区和时间
1.设置时区(同步时间前先设置) timedatectl set-timezone Asia/Shanghai 2.安装组件 yum -y install ntp systemctl enable n ...
- AndroidStudio 开发JNI
Android版本不断更新,发现网上很多JNI的教程,都不太适用了,会遇到各种问题,今天自己来总结一个. NDK下载 我们下载NDK,有两种下载方式: 这是Google官方下载 点击下载NDK: 通过 ...
- 对Array.prototype.slice.call()方法的理解
在看别人代码时,发现有这么个写法:[].slice.call(arguments, 0),这到底是什么意思呢? 1.基础 1)slice() 方法可从已有的数组中返回选定的元素. start:必需.规 ...