Safari 前端开发调试 iOS 完美解决方案

在日趋现代化的 Web 网络中，各种现代浏览器和移动终端设备的用户百分比越来越高。对于我们 Web 前端开发者来说，运行 iOS Safari 浏览器的苹果移动设备对我们来说更是不容忽视的。然而当我们需要对前端页面进行测试调试时，桌面版 Safari 的表现并不是与移动版 Safari 一模一样的（主要缘起 CSS 中 device-width 的判断），因此我们只能直接在 iOS 设备上对 Safari 进行测试与调试。

　　本文主要介绍由苹果官方提供的 iOS 设备上 Safari 浏览器的前端调试解决方案的详细操作方法。笔者采用的是：运行在 iOS 6.0.1 上的移动版 Safari 和运行在 OS X Mountain Lion 上的桌面版 Safari（Windows 版本的 Safari 暂无此功能）。理论上对 iPhone、iTouch、iPad 等苹果移动设备上的移动版 Safari 浏览器均可行。

在设置中开启功能

　　【iOS 终端】：设置 → Safari → 高级 → Web 检查器 → 开。（如图）

　　【OS X】：Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单。（如图）

连接移动设备与计算机并启用调试器

　　在 OS X 中启动 Safari 之后，以 USB 电缆正常接入 iOS 设备，并在此移动设备上启动 Safari。此时点击计算机上的 Safari 菜单中的“开发”，可以看到有 iOS 设备的名称显示，其子菜单项即为移动设备上 Safari 的所有标签页，点击任意一个开始调试。（如图）

在这个调试器里，我们可以像使用桌面操作系统的 Safari 的调试器一样，做各种调试工作，譬如 HTML 元素、CSS 及盒模型等的查看和即时编辑、JavaScript 调试器、网页元素时间轴、DOM 元素查看器等各种功能。（如图）


JavaScript 即时调试


同期 iPhone 屏幕截图


网络请求时间线

时间： 2024-08-10 04:20:59

Safari 前端开发调试 iOS 完美解决方案的相关文章

移动端前端开发调试

转自:http://yujiangshui.com/multidevice-frontend-debug/ 通过移动端使用 Web 服务的比率越来越大,例如淘宝今年双十一,移动端交易份额就达到 42.6%.由此可见,掌握移动端的前端开发和测试是非常有必要的. 由于之前做过大量有响应式需求的项目:今年(2014)年初也配合 Denis 的 微信机器人 做了一些用于微信的移动端项目:在淘宝 UED 实习的时候,也有参与过一个针对移动端的游戏的部分开发.所以算是积累了一点移动端调试的经验,在这里分享一

转载 移动端前端开发调试

以下内容转载自:http://yujiangshui.com/multidevice-frontend-debug/ 本文更新说明:第一版是在 2014-06-16 编写的,现在来看,内容不够分明,思路不够清晰,方法不够完全.故再次更新.补充.修改,力求可以作为移动端前端开发测试的基本参考文档.后续还会随着技术的进步不断调整和修改. ———————————————————— 通过移动端使用 Web 服务的比率越来越大,例如淘宝今年双十一,移动端交易份额就达到 42.6%.由此可见,掌握移动端的前

web前端开发与iOS终端开发的异同[转]

* {-webkit-tap-highlight-color: rgba(0,0,0,0);}html {-webkit-text-size-adjust: none;}body {font-family: Arial, Helvetica, sans-serif;margin: 0;color: #333;word-wrap: break-word;}h1, h2, h3, h4, h5, h6 {line-height: 1.1;}img {max-width: 100% !importan

手机前端开发调试利器 – vConsole

我们在开发手机版网页的时候,常常会出现下面的情景: (1) 开发时,在自己电脑上运行得好好的,在手机上打开就挂了,但是手机上又看不到error log: (2) 上线后,某用户表示页面失灵,但我们自己又重现不出来,看不到用户侧的出错信息. 如果说(1)还可以通过电脑连接手机以查看log来解决,那(2)在没有完善的前端上报体系时就非常被动了. 作为开发者,我们的诉求很简单:有没有快捷的方法在手机前端页面看到log日志? 答案是肯定的. vConsole:一个轻量.可拓展.针对手机网页的前端开发者调

前端开发在IOS上元素active状态无法触发问题

###需求: 按钮在点击时变色,给用户反馈: 手指离开屏幕后按钮颜色变回之前的颜色: ###问题: 使用css  active状态来实现上述需求:发现在浏览器和Android手机上效果都ok.但是IOS上死活不行.后来偶然发现一篇博文:http://blog.csdn.net/freshlover/article/details/43735273 解释了这个问题(感谢google).意思就是,如果你的body元素没有绑定'touchstart'事件,safari就不会使用active状态. ##

前端开发调试线上代码的两款工具

用过 Charles 和 Fiddler 这两款,记录如下. 一.Charles Charles 界面简单直观,易于上手,数据请求控制容易,修改也简单,抓取数据的开始暂停也方便.支持 win,mac,linux. 1. 安装前提Charles 需要有 Java 环境,请提前下载安装 JDK.JDK 已经 8 了. 根据自己的系统选择对应的JDK.我的是 win7,双击安装,一直下一步就哦了.在命令行窗口输入以下命令,出现截图所示就表示 JDK 安装成功了 2. 下载 Charles Charle

前端开发缓存问题的解决方案

在没有使用vue angular react 三大流行框架去开发静态的项目时,困扰我们最多的就是缓存问题,没有三大框架的优势之热刷新功能,如何做到我们修改了我们引用的外部文件里的某些内容,回到页面,刷新一下就能看到最新的效果或是样式呢?说的直白点就是动态的给文件加版本号,在没有接触php我是不知道如何用js去控制,为了安全,前端不具有改写文件的能力,我就想到了同样可以嵌套html内容的php语言,作为一个前端,懂点后端语言真的没坏事,不说废话了,上代码. 第一步:项目下面一定得有一个 控制版本的

移动端前端开发真机调试攻略

移动端前端开发真机调试攻略 一.IOS 移动端 (Safari开发者工具) 手机端:设置 → Safari → 高级 → Web 检查器 → 开. mac端:Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单. 在 OS X 中启动 Safari 之后,以 USB 电缆正常接入 iOS 设备,并在此移动设备上启动 Safari.此时点击计算机上的 Safari 菜单中的“开发”,可以看到有 iOS 设备的名称显示,其子菜单项即为移动设备上 Safari 的所有标签页,点击任意一

一探前端开发中的JS调试技巧

前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要. 本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会填补空白. 骨灰级调试大师Alert 那还是互联网刚刚起步的时代,网页前