Overview

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

Safari设置

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

iPhone设置

打开iPhone手机设置app 选择Safari，找到高级选项，有JavaScript开关web检查器开关，讲两个开关都打开

调试

到此，准备工作完成。这时候讲iPhone链接到mac上，打开Safari浏览器，运行手机app里面的web页面，在开发菜单中选择连接的手机，找到调试的网页，就能在Safari里面调试了

手机截屏

Safari调试窗口

Safari控制台

在Safari中鼠标右键，选择检查元素，就可以看见Safari控制台了。如果看不到检查元素选项，依照上面Safari设置打开开发选项

 
 

iOS之safari调试iOS app web页面的更多相关文章

  1. 利用iOS中Safari浏览器创建伪Web App

    在safari浏览器里有一个“添加到主屏幕”选项,我们可以用来创建伪Web App,下面来了解一下iOS中Safari的私有属性 第一步设置Web App的主屏幕图标: 有两种属性值apple-tou ...

  2. 在mac上如何用safari调试ios手机的移动端页面

    第一步:打开iphone手机的开发者模式,流程是:[设置]->[Safari]->[高级]->开启[Web检查器] ,如图1.图2 图1 图2第二步:打开Mac上Safari的开发者 ...

  3. iOS之Safari调试webView/H5页面

    之前做过混合开发,用的是JavaScriptCore+OC+UIWebView. Safari调试功能真的很有用,通过它可以轻松定位问题的所在,下面说说怎么调试. 开启Safari开发菜单 在Mac的 ...

  4. iOS开发Safari调试WebView页面

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

  5. iOS使用Safari调试UIWebView

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

  6. H5移动端，ios从后台返回到app，页面会白一下

    visibilitychange事件可以检查从后台返回事件,然后通过添加div,强制浏览器刷新页面 var divEle = document.createElement("DIV" ...

  7. iOS真机调试问题-App installation failed，The maximum number of apps for free development profiles has been reached.

    The maximum number of apps for free development profiles has been reached. 源引:http://www.jianshu.com ...

  8. 在mac上如何用safari浏览器调试ios手机的移动端页面

    第一步 打开iphone手机的开发者模式,流程是:[设置]->[Safari]->[高级]->开启[Web检查器] 第二步 打开Mac上Safari的开发者模式,流程是[Safari ...

  9. Cordova - 使用Cordova开发iOS应用实战2（生命周期、使用Safari调试）

    Cordova - 使用Cordova开发iOS应用实战2(生命周期.使用Safari调试) 前文我们创建了一个简单的Cordova项目,结构如下: 1,Cordova生命周期事件 (1)device ...

随机推荐

  1. Python-MRO和C3算法

    一. python多继承 在前面的学习过程中,我们已经知道了python中类与类之间可以有继承关系,当出现x是一种y的时候就可以使用继承关系.即'is-a'关系,在继承关系中子类自动拥有父类中除了私有 ...

  2. js 两个小括号 ()() 的用法

    实现一个函数fn, 使fn(1)(2)的结果为两个参数的和,刚开始没反应过来,其实细细一想第二个括号就是函数再调用的问题,废话不多说,代码奉上: var fn = function(n) { func ...

  3. mui.ajax()和asp.net sql服务器数据交互【2】json数组和封装

    今天没有做循环创建显示:可以参考张鑫旭的文章:<基于HTML模板和JSON数据的JavaScript交互> 1.ashx页面代码 //下面的封装一般框架底层都是写好的:连接 数据库和获取D ...

  4. CentOS下调整home和根分区大小

    由于我们有时候没法预估或者说错误的盘符分区的时候,常常会导致我们后面的操作出现极大的不方便,这里我就记录下一个错误分区后对home和根分区存储空间大小调整的整个过程! ①查看我们现有机器的分区状况 c ...

  5. css flexbox 弹性布局

    flexbox 即css flexible box layout. ie9及以下不支持flexbox. flex详细规范(https://www.w3.org/TR/css-flexbox/) 为什么 ...

  6. js中的this--执行上下文

    条件:函数调用的时候  才有执行上下文 this 不同情况的调用,this也不同 1)当函数直接打点调用,此时的this 是window 2)事件触发函数,此时的this是触发这个事件的对象 3)当对 ...

  7. centos aws 修改使用密码ssh登录

    因为使用pem登录有很多局限性,在此修改为用密码但不是root登录 1.关闭selinux(要重启) vi /etc/selinux/config SELINUX=disabled 2.重置root密 ...

  8. Scrapy框架Windows下安装

    在windows下安装好Python3 后,安装Scrapy也有许多种方法,我这里采用pip 安装.前提您已经安装了pip 直接在cmd命令行中 pip install Scrapy building ...

  9. antd button

    引用 :import { Button } from 'antd'; <Button type = "primary" //按钮样式颜色 shape = "circ ...

  10. June 25th 2017 Week 26th Sunday

    There is always that one song that brings back old memories. 总有那么一首歌,让你想起那些旧的回忆. There are seveal so ...