转http://www.2cto.com/kf/201403/283404.html

afari 前端开发调试 iOS 完美解决方案
2014-03-05      0个评论    来源：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 元素查看器等各种功能。（如图）


HTML 结构及对应 CSS


同期 iPhone 屏幕截图


HTML 结构及对应 CSS 即时编辑


同期 iPhone 屏幕截图


JavaScript 即时调试


同期 iPhone 屏幕截图


网络请求时间线

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

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

    * {-webkit-tap-highlight-color: rgba(0,0,0,0);}html {-webkit-text-size-adjust: none;}body {font-fami ...

  2. IE, FF, Safari前端开发常用调试工具

    一些前端开发 IE 中的常用调试工具: Microsoft Script Debugger —— Companion.JS need to install this Companion.JS —— J ...

  3. Web前端开发与iOS终端开发的异同

    语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,不像后台想用什么就用什么,iOS只能用Objective-C,前端只能javascrip ...

  4. 前端开发在IOS端遇到的一个诡异问题(Delegate 失效)

    一.前言 最近同事问到一个问题,一个前端页面在IOS端真机测试下出现一个比较诡异的问题,如果没有遇到过估计也是一筹莫展.今天特此记录一下,或许能帮到后面遇到这个问题的朋友少绕一些弯路.这是关于JQue ...

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

    我们在开发手机版网页的时候,常常会出现下面的情景: (1) 开发时,在自己电脑上运行得好好的,在手机上打开就挂了,但是手机上又看不到error log: (2) 上线后,某用户表示页面失灵,但我们自己 ...

  6. 配置移动前端开发调试环境（nodejs+npm+weiner的安装和配置使用)

    这段时间发现做移动端的开发调试是一大难题,网上逛了逛发现有一些工具可用,如chrome的远程调试,实际测试过程中我始终调试不成功,听说被墙后是不行的,所以最终找了如下的方法. 因为基于nodeJS环境 ...

  7. 手机前端开发调试利器-vConsole

    最近因为做抽奖页面,在android上可以使用手机连上电脑后用chrome浏览器chrome://inspect进行页面探测,但是ios中的页面就不能这样探测 在网上搜索后发现此插件,大大解决了问题 ...

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

    前言 调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...

  9. 前端开发中的JS调试技巧

    前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...

随机推荐

  1. Trick

    1. var b = a.slice(beginIndex,endIndex); [].slice.call( [] ) Array.prototype.slice.call([]) will cop ...

  2. hiho_1141

    题目 按顺序给出N个数字,求出所有的逆序对个数(逆序对指数字 Ai > Aj且 i < j) 题目链接:hiho_1141     数据规模为 100000,必须使用O(nlogn)的算法 ...

  3. Sprint2-3.0

    后续安排 第16周 周二晚7点之前将本代码上传到GITHUB. GITHUB地址:https://github.com/QueenIcey/teamwork/tree/master/eslife1 周 ...

  4. github文件上传及github pages博客搭建教程

    一.与github建立连接 1.安装node.js和git 2.桌面新建文件夹[github],右键“git bash here” 3.注册github账号,新建仓库“new repository”, ...

  5. iOS7中的ViewController切换

    转自:https://onevcat.com/2013/10/vc-transition-in-ios7/ iOS 7 SDK之前的VC切换解决方案 在深入iOS 7的VC切换效果的新API实现之前, ...

  6. 最短路径——Floyd算法

    如何求一张图中任意两顶点之间的最短路径长度,这里写一种最简单的算法——Floyd算法: #include<stdio.h> #define inf 9999 int main() { ][ ...

  7. debian开机启动管理

    debian开机启动管理(转文) linux下,services的启动.停止等通常是通过/etc/init.d的目录下的脚本来控制的.在启动或改变运行级别是在/etc/rcX.d中来搜索脚本.其中X是 ...

  8. Python基础教程-第一章-变量、函数、字符串

    1.1变量 变量基本上就是代表(或者引用)某个值的名字,举例来说,如果希望用x代表3,只需要执行下面的语句即可: >>>x = 3 这样的操作称为赋值(assignment),值3赋 ...

  9. [FTP] Pure-FTPd SSL/TLS 配置方法

    一.准备 & 安装启用 Pure-FTPd SSL/TLS 连接方式在安装时需要检查以下两项:1.系统中是否已经安装了 openssl 和 openssl-devel 包?2.在编译 Pure ...

  10. Java中的异常处理

    描述: 如果Java中的函数有可能抛出异常,则该异常要么被catch住,要么在声明函数时必须声明该函数体会throws exception. 处理的时候的流程是,当发生异常时,首先结束当前函数后续语句 ...