这个调试过程和我们平常在 Mac/PC 上调试基本一样

作者:mgm娱乐

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

mgm娱乐,在日趋现代化的 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 检查器 → 开。(如图)

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

mgm娱乐 1

mgm娱乐 2

对于HTML5的开发,大家都知道Chrome的DevTools工具有强大的功能和友好的用户体验,不仅能快速方便调试JavaScript、检查HTML页面DOM结构、实时同步更新元素CSS样式,还能跟踪分析页面资源加载性能等问题。

  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 的所有标签页,点击任意一个开始调试。(如图)

mgm娱乐 3

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

mgm娱乐 4
HTML 结构及对应 CSS

mgm娱乐 5
同期 iPhone 屏幕截图

mgm娱乐 6
HTML 结构及对应 CSS 即时编辑

mgm娱乐 7
同期 iPhone 屏幕截图

mgm娱乐 8
JavaScript 即时调试

mgm娱乐 9
同期 iPhone 屏幕截图

mgm娱乐 10
网络请求时间线

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

对于移动平台的开发者来说,从iOS5.0开始,也可以通过Safari的Web Inspector工具连接设备对应用进行调试。

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

调试效果如图所示:

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

mgm娱乐 11

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

我们有2种方式,一种是使用xcode iOS模拟器,一种是使用iPhone、iPad、iTouch等真实设备。

如果使用xcode模拟器,可以直接使用safari的控制台debug。

如果使用真机,由于iOS有签名校验机制,正式包不允许safari debug,所以安装在真机上的包必须是测试签名打的包。此时参考如下步骤:

真机调试环境

本文由mgm娱乐发布,转载请注明来源

关键词: