一种是行使中兴、平板电脑、iTouch等实际设备,检查器那类的工具对前端开拓举行调节和测验

图片 17

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

在设置中开启功能

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

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

图片 1

图片 2

运行Safari,点击“Safari”菜单下面的“偏好设置(Preferences…)”,切换到“高级选项(Advanced)”:

Fiddler

Fiddler 是可以运行在 Mac,Linux 和 Windows 上的一个用于 web
调试的代理软件。可以用来查看 HTTP API 访问,AMD
脚本加载,缓存命中等。Fiddler 有丰富的调试功能,其中支持 HTTPS
捕获和篡改请求响应对移动端调试十分有用。

使用 HTTPS 捕获功能需要在移动设备上安装 Fiddler
提供的证书,各移动平台的设置方法可在找到。有时我们需要替换线上产品的某个
js 文件来定位问题,或者伪造 session 来模拟使用场景,Fiddler
的篡改功能就能派上用场,具体的使用细节可以在找到。

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

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

第四步、Web Inspector调试

3、Safari 与 Chrome

使用 PC 浏览器来调试对应的移动浏览器,你将拥有最佳的调试体验。WebKit
家族的 PC
浏览器都有非常强大的调试工具,其调试移动设备的体验几乎与调试桌面网页无异。Opera
自从将渲染核心从 Presto 切换到 Blink 之后,自家用于调试 Opera Mobile 的
Dragonfly 也被移除了,可见 Opera 对 Webkit 调试工具也是满意的(汗)。

Mac Safari 调试 iOS Safari 和 UIWebView 只需经过简单的设置。首先在 iOS
设备上启用 Safari 的 Web 检查器功能(设置>Safari>高级>Web
检查器),再通过 USB 线缆连接到 Mac,然后就能在 Mac Safari
的“开发”菜单中选中该设备来进行调试。如果没有找到“开发”菜单,则需要在
Safari 偏好设置中启用调试功能。调试 UIWebView 的步骤是一样的,但是要求
app 在该 Mac 设备上能被调试,也就是说第三方开发者是不能直接调试微信的
UIWebView 的。

图片 3

(Mac Safari 调试 iOS Safari)

Chrome 调试 Chrome for Android 和基于 Chromium 的 WebView
的详情可以在找到。值得一提的是,Chrome
调试支持 Screencast 功能,能够将移动设备上的 Web 视图投射到 Chrome
调试工具中,不过这回降低 webapp 的性能表现。

图片 4

(Chrome 调试 Chrome for Android)

使用 Chrome 来调试 iOS 设备也是可行的。利用 google 开发的
ios-webkit-debug-proxy,把 Safari 的远程调试协议代理到 Chrome DevTools
上,可以由 DevTools 接管几乎所有的调试功能。

图片 5

(Chrome 调试 iOS Safari)

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

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

第一步、开启iOS设备的调试功能

调试工具

本文仅介绍可以免费下载和使用的工具。

图片 6

(调试工具总览)

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

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

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

图片 7

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

图片 8
HTML 结构及对应 CSS

图片 9
同期 iPhone 屏幕截图

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

图片 11
同期 iPhone 屏幕截图

图片 12
JavaScript 即时调试

图片 13
同期 iPhone 屏幕截图

图片 14
网络请求时间线

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

打开“开发者”菜单

Webkit

Safari 和 Chrome 在移动平台上强大的调试能力源自 Webkit
的远程调试协议(remote debugging protocol)。Webkit 的远程调试协议是
Webkit 在 2012 年引入的,目前所有 Webkit
内核的浏览器都支持这一特性。DevTools
通过远程调试协议与目标页面相连,可以获取到 Webkit
内核提供的调试信息,这些信息远比 weinre
等在浏览器沙盒中获取的要准确和丰富。Webkit 远程调试协议与 Chrome
DevTools 都是开放的,这让 ios-webkit-debug-proxy, React DevTools 和
vue-devtools
等强大且富有想象力的调试工具能成为现实。得益于协议的开放性,其他厂商也对
Webkit 调试表现出积极的兴趣。Firefox 宣布了用于调试 Webkit 内核浏览器的
Valence,不过目前仍处于技术预览版。

图片 15

  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
    应用进行调试:

启动上一步安装的应用,并且打开有webview的界面,并将设备连接到Mac电脑

缩小调试范围

笔者认为移动设备上调试的需求主要来自于两点,一是 webapp
使用了(或需要适配)移动平台上独有的特性,例如触摸事件、虚拟键盘遮盖、移动平台独有的
BOM API 等,二是 webapp 出现 PC
浏览器上不可复现的错误。对于前者,我们似乎是只能迎难而上,但对于后者,则可以尽量避免。

出现在 PC
上不可复现的错误的主要原因是浏览器的兼容性问题,其中渲染的问题更加突出。得益于
JavaScript 的语言特性和 ES5 广泛实现,借助 babel 等工具,我们可以将由
ES6 ES7 语法编写的代码编译为 ES5 的,从而避免 JavaScript
上的兼容性问题。

图片 16

(ES5 support table (来自于 caniuse))

不过 CSS
很难甚至是不能被通过打补丁(polyfill)和编译的方式来达到完美的兼容性。开发者要对各目标平台的
CSS 支持度充分了解,从中选取广泛支持的特性来进行开发。好在 WebKit
以及衍生品已占据了移动浏览器渲染引擎(WebKit 包括用于布局渲染的 WebCore
和执行 JavaScript 的 JavaScriptCore
两个引擎,本文只取其渲染引擎的含义)的主要份额,使 CSS
特性确定的工作减轻不少。

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

调试效果如图所示:

图片 17

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

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

1、weinre 与 jsconsole

weinre (WEb INspector REmote) 与 jsconsole 是原理上相似的工具。weinre
复用了 WebKit 的 Web Inspector 的界面代码,有 Safari 和 Chrome
调试器经验的开发者会对此非常熟悉。jsconsole 是一个 JavaScript 的 web
控制台,它能接管控制台的日志输出,也能响应调试服务器发出的求值命令(通过
Server-Send Event 发出),将日志和求值结果通过 xhr
发送到服务器。jsconsole
功能虽然更少,但官方提供了一个开箱即用的线上应用,
JavaScript
编写,都必须把调试服务脚本插入目标页面,使其难以用于线上产品的调试。并且由于运行在浏览器沙盒中,其提供调试能力受到了较大的限制,例如无法查看
httponly 属性的 cookie,和非 xhr 的请求。

如果是真机点击“开发(Develop)”弹出菜单会出现设备名称项,进入后显示设备上所有打开的“HTML页面”列表:

背景

出于解放生产力和降低成本的考量,越来越多的团队开始尝试以 web
技术来开发应用。

在各移动平台上,native app
开发都得到了官方的最大支持,工具链非常成熟。尽管如此,native app
开发者往往都不喜欢真机调试,因为它非常费时。在 webapp
开发这边,情况更加糟糕。不仅费时,由于 webapp
往往要覆盖多个平台,需要在多种设备上进行调试,这还让调试工作变得非常地琐碎,难以形成通用的方案。

前端开发者在 PC
平台上如鱼得水,然而切换到移动平台,则受到掣肘。本文尝试总结一些简单有效的调试方案,以满足不同场景下调试的需求。

相关文章

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图