iOS之Safari调试H5页面

之前做过混合开发,用的是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操作来寻找问题,解决问题。希望可以帮助到小伙伴们。

时间: 2024-10-11 03:58:39

iOS之Safari调试H5页面的相关文章

iOS开发Safari调试WebView页面

App混合开发现已是常态,不过作为app端开发人员,对H5页面的使用,可不能简单的局限于使用,一些简单的调试方法还是有必要了解的. 关于如何在使用webview过程中,如何对web内对内容进行调试,这里会简单讲一下步骤. 一.真机或Simulator  打开"设置"->"Safari"->"高级"->"Web检查器" 二.打开电脑上 Safari  ->"偏好设置" -> &q

ios应用内嵌h5页面数据自动变色识别为手机号码的解决方法——手机号码拨号禁用IOS手机页面数字自动识别为手机号

现象如下,ios应用内嵌h5页面,本来是设置了白色的数字,两三秒之后会自动变为黑色,然后点击的时候就会弹出是否拨号的提示: 解决方法,添加如下meta标签,即可解决: <meta name="format-detection" content="telephone=no">

iOS原生App与H5页面交互笔记

iOS原生App与H5页面交互笔记 字数390 阅读2204 评论1 喜欢25 最近在做一个项目用到了原生App与H5交互,之前有做过简单的H5页面直接调用原生方法的例子,就是利用UIWebView中的代理方法 //webview每次加载之前都会调用这个方法,利用该代理方法截取JS的href来调用原生的方法 - (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigatio

iOS之safari调试iOS app web页面

Overview 当下移动端开发过程中大量使用前段H5.js等等技术,而这些web页面的调试在Xcode控制台中不太明了,经常我们移动app运行了就是方法,但是不能显示响应的效果,这时候或许就是已经报错了,但是我们在Xcode控制台是看不到这些错误.这时候我们就可以用功能强大的Safari浏览器来开启开发模式连接iPhone来调试app脸面的web页面了. Safari设置 打开Safari偏好者设置,选中"高级菜单",在页面最下方看到"在菜单中显示开发菜单"的复选

关于ios的safari下,页面底部弹出登陆遮罩层,呼出软键盘时 问题解决

前阵子遇到了一个问题,就是手机端页面弹出遮罩+底部登陆的弹出层. 一般情况下就直接给fixed固定定位了,然而做测试时发现了一个很大的问题 iOS的safari下,固定定位会跑到整个页面的最底部,而不是当前页的最底部. 查了好多百度然而还是没有找到有用的解决方案,后来问了一位前端的大神,大神说这种情况下,需要区分两种状态, 一是默认状态,即 除了safari之外的其他浏览器(需要判断一下浏览器是否为safari) 二是 safari浏览器状态下,(由于公司只要求测UC,QQ浏览器,顾,发现  在

iOS原生App与H5页面交互

文/MikeZhangpy(简书作者)原文链接:http://www.jianshu.com/p/4ed3e5ed99c6著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 最近在做一个项目用到了原生App与H5交互,之前有做过简单的H5页面直接调用原生方法的例子,就是利用UIWebView中的代理方法 //webview每次加载之前都会调用这个方法,利用该代理方法截取JS的href来调用原生的方法 - (BOOL)webView:(UIWebView*)webView should

通过chrome浏览器调试手机页面(IOS和Android)

开发PC页面的时候使用chrome浏览器的开发者工具,可以很容易的捕获到页面的dom元素,并且可以修改样式,方便调试,但是手机上却很麻烦,因为手机上没有办法直接打开开发者工具查看元素.其实可以通过将设备连接到PC,使用PC的开发者工具检测 一.针对android设备 1.在android设备上开始开发者模式 2.将设备连接到PC,在chrome浏览器地址栏输入:chrome://inspect/#devices 3.在手机上打开网页的时候,chrome就会检测到网页,可以直接调试 二.针对IOS

利用浏览器调试APP中的H5页面

安卓手机的情况下,可以用chrome浏览器来调试. 打开地址: chrome://inspect/#devices 手机用USB数据线连接电脑,并启动USB调试模式. 只要在APP中打开H5页面,界面就会显示该页面地址 点击inspect进入调试模式 之后就可以像调试浏览器页面一样调试了. 这个方法也可以用来查看APP中哪些页面调用的是H5的页面. 苹果手机可以用Safari自带的调试工具调试,在Safari浏览器工具栏-开发一栏下.

ios嵌套H5页面,出现的小bug;

ios嵌套H5页面,点击数字时就会弹出打电话的功能:解决方法: 在head标签中添加: <meta name="format-detection" content="telephone=no"> ios嵌套H5页面,只要碰到页面,就会使input获取焦点,调取ios键盘,解决方法:在页面上添加js如下: $("body")[0].addEventListener("touchstart",function(){ d