之前做过混合开发,用的是JavaScriptCore+OC+UIWebView。

Safari调试功能真的很有用,通过它可以轻松定位问题的所在,下面说说怎么调试.

开启Safari开发菜单

在Mac的Safari偏好设置中,开启开发菜单。具体步骤为:Safari -> 偏好设置… -> 高级 -> 勾选在菜单栏显示“开发”菜单。

iPhone开启Web检查器

具体步骤为:设置 -> Safari -> 高级 -> Web 检查器。

运行App

打开项目,Cmd + R 运行,打开想调试的Web页面。

调试对应的页面

打开Safari -> 开发 -> 设备 -> URL。

选中的页面会变成蓝色,点击然后打开了如下的界面。

这个页面就很像Windows 平台ChromeF12。可以打断点:

查看断点

查看Cookie

打印Cookie或者元素

比如在这里Alert页面的title,输入 alert(document.title);,你会在模拟器中看到弹窗

整体十分有用,操作的体验跟Xcode很像,小伙伴们自行探索。

比如新做的h5页面中,有一个分享按钮,点击调用原生的分享,但是发现,点击之后没有反应了,什么问题呢?是Native端实现有问题,还是前端写的有问题呢?如图

我们来帮忙看下吧,打开Safari Web 检查器,定位到资源,并且在share方法中添加断点,如图

会发现,并没有断住,而是页面直接报错了,仔细查看错误描述,share方法里多了一个“/”,因此报错了。当我点击分享按钮时

会发现,提示找不到变量share。这里我需要说明一下:

当js中报错的时候,报错位置所在的函数以及报错位置之后的代码,都不会执行,所以我点击分享时,提示的是找不到方法,因为js的语法不对,报错了,这里解析不出来,所以也就没有了sharetestAddMethod和之后的函数。

那么当我点击分享下面的按钮是,调用share下面定义的方法也就会提示找不到对应的函数了。

至此,问题找到了,只要告之前端开发人员即可,让他修复即可。

实际遇到的问题可能要复杂的多,可以通过断点,以及控制台打印一些js变量的值,DOM操作来寻找问题,解决问题。希望可以帮助到小伙伴们。

iOS之Safari调试webView/H5页面的更多相关文章

  1. iOS开发Safari调试WebView页面

    App混合开发现已是常态,不过作为app端开发人员,对H5页面的使用,可不能简单的局限于使用,一些简单的调试方法还是有必要了解的. 关于如何在使用webview过程中,如何对web内对内容进行调试,这 ...

  2. webview h5页面 关闭

    说明:在 ios 安卓  客户端上的h5页面执行完毕关闭h5页面   引入的js在文件中的xhdoctor_mobile.rar

  3. 谷歌浏览器chrome://inspect/#devices调试webview的页面和控制台布局错乱问题

    谷歌浏览器chrome://inspect/#devices调试webview的页面和控制台布局错乱问题 : 谷歌浏览器的版本过高,选择60版本即可: 版本 60.0.3080.5(正式版本)

  4. ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法

    一. 运行环境: iphone所有机型的qq浏览器,safari浏览器,微信内置浏览器(qq浏览器内核)等. 二. 异常现象: 1. 大幅度上下滑动h5页面,然后停止滑动,有时候会影响到页面滚动,如局 ...

  5. iOS之safari调试iOS app web页面

    Overview 当下移动端开发过程中大量使用前段H5.js等等技术,而这些web页面的调试在Xcode控制台中不太明了,经常我们移动app运行了就是方法,但是不能显示响应的效果,这时候或许就是已经报 ...

  6. ios下app内嵌h5页面是video适配问题

    ios下做新闻详情用h5页面实现然后打包到app中,其中新闻详情页会有视频,安卓下video的poster可以做到适应video大小,但是ios下会按照poster图片大小将video等比撑大,但是视 ...

  7. iOS使用Safari调试UIWebView

    1.设置Safari "Safari"->"偏好设置"->"高级",勾选"在菜单栏中显示开发菜单" 2.设置 ...

  8. Appium Inspector定位Webview/H5页面元素

    目录 操作步骤 Python操作该混合App代码 Appium在操作混合App或Android App的H5页面时, 常常需要定位H5页面中的元素, 传统方式是 翻墙 + 使用Chrome://ins ...

  9. safari 调试iPhone web页面

    safari设置-打开Safari偏好者设置,选中“高级菜单”,在页面最下方看到“在菜单中显示开发菜单”的复选框,在复选框内打钩,这样设置完毕就能在Safari菜单中看到开发菜单了 iPhone 设置 ...

随机推荐

  1. 深入学习Motan系列(五)—— 序列化与编码协议

    一.序列化 1.什么是序列化和反序列化? 序列化:将对象变成有序的字节流,里面保存了对象的状态和相关描述信息. 反序列化:将有序的字节流恢复成对象. 一句话来说,就是对象的保存与恢复. 为什么需要这个 ...

  2. 从npm 角度理解 mvn 的 pom.xml

    从npm 角度理解 mvn 的 pom.xml pom -- project object model. 用于描述项目的配置: 基础说明 依赖 如何构建运行 类似 node.js 的 package. ...

  3. BEAM188简单应用

    目录 BEAM188简介 APDL应用实例 显示梁三维图 BEAM188简介 BEAM188-3D线性有限应变梁 Beam188 单元适合于分析从细长到中等粗短的梁结构,该单元基于铁木辛哥梁结构理论, ...

  4. Java自定义类加载器与双亲委派模型

    其实,双亲委派模型并不复杂.自定义类加载器也不难!随便从网上搜一下就能搜出一大把结果,然后copy一下就能用.但是,如果每次想自定义类加载器就必须搜一遍别人的文章,然后复制,这样显然不行.可是自定义类 ...

  5. python中的is和==

    is和== Python中的对象包含三要素:id.type.value id方法的返回值就是对象的内存地址其中id用来唯一标识一个对象,type标识对象的类型,value是对象的值 is 判断的是a对 ...

  6. 第1章 Java语言概述--HelloWorld--环境搭建

    SE学什么 第1章 Java语言概述 第2章 基本语法 第3章 数组 第4章 面向对象编程(上) 第5章 面向对象编程(中) 第6章 面向对象编程(下) 第7章 异常处理 第8章 枚举类&注解 ...

  7. Fabric的settings用法

    http://fabric-chs.readthedocs.io/zh_CN/chs/api/core/context_managers.html?highlight=with%20settings# ...

  8. centos7 设置时区和时间

    1.设置时区(同步时间前先设置) timedatectl set-timezone Asia/Shanghai 2.安装组件 yum -y install ntp systemctl enable n ...

  9. AndroidStudio 开发JNI

    Android版本不断更新,发现网上很多JNI的教程,都不太适用了,会遇到各种问题,今天自己来总结一个. NDK下载 我们下载NDK,有两种下载方式: 这是Google官方下载 点击下载NDK: 通过 ...

  10. 对Array.prototype.slice.call()方法的理解

    在看别人代码时,发现有这么个写法:[].slice.call(arguments, 0),这到底是什么意思呢? 1.基础 1)slice() 方法可从已有的数组中返回选定的元素. start:必需.规 ...