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

我们知道在 Mac/PC 上的浏览器都有 Web
检查器这类的工具对前端开发进行调试,而在 iPhone/iPad
由于限于屏幕的大小和触摸屏的使用习惯,直接对网页调试非常不方便,所以一直没有
Web 检查器这一类工具。

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

但是 iOS 6 的发布解决了这个问题。

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

iOS 6 给 Safari 带来了远程的 Web
检查器工具,你可以通过模拟器或者真实的设备进行调试。下面我讲讲详细的调试过程:

在设置中开启功能

  【iOS 终端】:设置 → Safari → 高级 → Web 检查器 → 开。(如图)

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

图片 1

图片 2

  1. 要进行远程调试,首先要打开开启 iPhone/iPad 上的 Safari
    的远程调试功能,“通过 设置 > Safari > 高级”开启:

  2. 然后打开 Safari,开启你要调试的网页,当然原生应用中通过 WebView
    开启的网页也是可以调试的。

  3. 最后把 iPhone 或者 iPad 通过数据线连上 Mac 电脑,打开桌面版的
    Safari(目前 iOS 6 的 Safari 远程调试只支持通过 Mac 上的桌面版的 Safari
    进行,Safari for Windows
    目前还没有此项功能),点击开发菜单,选择你调试的 iPhone/iPad
    的设备名,选择调试的网页。

  4. 最后就是调用桌面版的 Safari 的 Web 检查器对 iPhone/iPad 上的 Safari
    应用进行调试:

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

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

图片 3

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

图片 4
HTML 结构及对应 CSS

图片 5
同期 iPhone 屏幕截图

图片 6
HTML 结构及对应 CSS 即时编辑

图片 7
同期 iPhone 屏幕截图

图片 8
JavaScript 即时调试

图片 9
同期 iPhone 屏幕截图

图片 10
网络请求时间线

Web
网络中,各种现代浏览器和移动终端设备的用户百分比越来越高。对于我们 Web
前端开发者来说,运行 iOS Safari 浏览器的…

这个调试过程和我们平常在 Mac/PC 上调试基本一样,比如可以对 HTML 和 CSS
做些实时的改动,查看修改后的效果。查看 cookie,本地存储,session
等一些数据。查看 WebApp
的性能,网络请求等,也可以查看所有错误和警告信息对程序进行修正。

当然我们可以通过它来调试
Javascript,设置断点,定义未捕获的意外等。也可以访问 Console,直接执行
Javascript 代码。

另外它还支持触摸检查:激活检查器上的手型图标,就可以通过在 iPhone/iPad
上触摸,就能立即找到检查器对应的 DOM 元素。

发表评论

电子邮件地址不会被公开。 必填项已用*标注