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. Strapi 安装易错位置

    Strapi官网(https://strapi.io)介绍:最先进的开源内容管理框架,可以毫不费力地构建功能强大的API,建立在Node.js平台之上,为您的API提供高速惊人的表现. 简单点说,(对 ...

  2. Google自写插件详解

    谷歌插件详解,跳转至个人主页查看. GoogleExtension

  3. ArcGIS中国工具（ArcGISCTools）2.0在线视频

    查看地址:http://i.youku.com/gisoracle 在线看的不太清楚,支持下载视频地址 使用手册下载地址:http://pan.baidu.com/s/1kTsTyXT操作视频下载地址 ...

  4. 用opencv做的静态图片人脸识别

    这次给大家分享一个图像识别方面的小项目,主要功能是识别图像中的人脸并根据人脸在图片库找出同一个与它最相似的图片,也就是辨别不同的人. 环境:VS2013+opencv2.4.13 主要是算法:open ...

  5. MYSQL连接相关参数和状态值详解

    针对mysql的连接参数和状态值,本文做些介绍和对比 一.MYSQL连接参数变量 1.常用连接数限制参数 show variables like '%connect%'; | max_connect_ ...

  6. Linux Mint 18.2安装后需要进行的设置

    自己的笔记本电脑升级到win10后各种不好用,运行速度慢,开关机时间很长,系统也是经常性的更新,外加发热严重.更改设置和更换驱动都没能解决问题.另外感觉在Linux下能够更加专注,所以索性将主系统更换 ...

  7. python全栈学习笔记（二）网络基础之子网划分

    阅读目录 一.ip地址基本知识 1.1 ip地址的结构和分类 1.2 特殊ip地址 1.3 子网掩码 1.4 ip地址申请 二.子网划分 2.1 子网划分概念 2.2 c类子网划分初探 2.3 子网划 ...

  8. impala安装笔记（Ubuntu）

    1.Override 1.With Impala, you can query data, whether stored in HDFS or Apache HBase – including SEL ...

  9. Wifi密码破解

    Wifi密码破解1:通过字典(暴力)破解WIFI密码   简单破解WEP/WPA/WPA2加密的WIFI密码,平台kali-linux 工具:Aircrack-ng 过程很简单:先抓含有正确密码的握手 ...

  10. 「C语言」原码反码补码与位运算

    尽管能查到各种文献,亲自归纳出自己的体系还是更能加深对该知识的理解.     本篇文章便是在结合百度百科有关原码.反码.补码和位运算的介绍并深度借鉴了张子秋和Liquor相关文章后整理而出.   目录 ...