通过 Mac 远程调试 iPhone/iPad 上的网页

标签: Apple iPad iPhone | 发表时间:2012-09-26 15:35 | 作者:Denis
出处:http://fairyfish.net

我们知道在 Mac/PC 上的浏览器都有 Web 检查器这类的工具(如最著名的 Firebug)对前端开发进行调试,而在 iPhone/iPad 由于限于屏幕的大小和触摸屏的使用习惯,直接对网页调试非常不方便,所以一直没有 Web 检查器这一类工具,但是 iOS 6 的发布解决了这个问题。

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

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

通过 Mac 在 iPhone/iPad 上远程调试网页

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

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

通过 Mac 在 iPhone/iPad 上远程调试网页

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

通过 Mac 在 iPhone/iPad 上远程调试网页

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

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

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

>>> 继续阅读全文 ...


欢迎关注我们关于 WordPress 技巧的微博:
新浪微博: http://weibo.com/wpjam
腾讯微博: http://t.qq.com/WordPressJam

© 我爱水煮鱼 / 收藏本文 / 0条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关 [mac 调试 iphone] 推荐:

通过 Mac 远程调试 iPhone/iPad 上的网页

- - 我爱水煮鱼
我们知道在 Mac/PC 上的浏览器都有 Web 检查器这类的工具(如最著名的 Firebug)对前端开发进行调试,而在 iPhone/iPad 由于限于屏幕的大小和触摸屏的使用习惯,直接对网页调试非常不方便,所以一直没有 Web 检查器这一类工具,但是 iOS 6 的发布解决了这个问题. iOS 6 给 Safari 带来了远程的 Web 检查器工具(Remote Web Inspector),你可以通过模拟器或者真实的设备(通过 USB 连上 Mac)进行调试.

iPhone+Mac+Omnifocus实践GTD和ZTD的几点心得(下)

- Lee - 褪墨
本文来自 毒龙的程序人生 原创投稿. 阅读上篇《iPhone+Mac+Omnifocus实践GTD和ZTD的几点心得(上)》. 用iPhone/Mac加上Omnifocus软件来实践GTD有2个月了,感觉非常不错,做事的效率比以前提高了许多,以前经常拖拉到最后一天才完成的事情,现在竟然能提前几天完成,所有事情都正确地记录和归类,再也不会忘记重要的事项.

iPhone+Mac+Omnifocus实践GTD和ZTD的几点心得(上)

- Evan - 褪墨
本文来自 毒龙的程序人生 原创投稿. 用iPhone/Mac加上Omnifocus软件来实践GTD有2个月了,感觉非常不错,做事的效率比以前提高了许多,以前经常拖拉到最后一天才完成的事情,现在竟然能提前几天完成,所有事情都正确地记录和归类,再也不会忘记重要的事项. 2个月前在看GTD相关的文章时就瞥见了ZTD,当时并没太多留意(GTD想学的东西太多,也没时间去留意),心想可能是与GTD不同的方法论,但后来对GTD有了一定程度的理解后,再来看ZTD,感觉对里面提到的10个习惯还是有相当的理解的,以下这10个习惯的标题和简介都来自于褪墨网站,我在GTD实践中对这10个习惯的一点点体会用不同字体标在下面.

用Mac与iPhone配合发送超长短信

- Jacky - Mac oo Life
几天前写的那篇《使用Shark通讯服务免费给手机用户发短信》提到过通过在Mac的键盘输入,来完成手机短信编辑. 不过由于要通过第三方,我觉得并不完美. 今天算是一个机缘巧合,在我写《使用QREncoder制作二维码》的时候突然发现一个可能奏效的办法,不需要通过第三方服务,就能够在Mac上编辑短信让iPhone发送.

苹果启动用礼品卡回购旧iPhone, iPad, Mac的计划

- peter - cnBeta.COM
苹果的iOS设备和MacBook已经发展了好几代,忠实的用户通常会新出一代就升级一代,这意味着他们的家里已经存下了不少想卖又难以卖出去的旧版产品,有鉴于此,苹果今天公布了一个回收计划,用苹果的礼品卡来支付老设备的回购,帮助用户在购买新款苹果设备时能够折价,也就更便宜. 该计划是和WeRecycle!服务合作启动,主要目的是为了拆解和回收有价值的部分,同时也保护了环境.

数据显示苹果Mac、iPhone和iPad均售价远比普通PC高50%

- David - cnBeta.COM
苹果盈利最多的三大产品线:Mac、iPhone和iPad的平均售价都要远远比普通Windows PC高很多. 所以很多分析师和电脑行业观察者通过比较苹果电脑和Windows PC的销量是不科学的,所以更好的比较方式就是通过平均售价.

Wunderlist。多平台雲端記事備忘錄,支援列表分享功能(iPhone、iPad、Android、Mac與Windows)

- Kelvin - 綠色工廠 Easylife Blog
以前很多軟體都是單機安裝版,為了方便慢慢開始尋求攜帶版,現在的軟體更是走向雲端版,所有資料同步在網路上是最方便的,現在行動上網裝置也越來越多,這也是不能避免的趨勢. 而不管你是學生、上班族或是自由業等等,每天要做的事情也不少,只要你同時擁有個人電腦(Windows或Mac)與行動裝置(iPad、iPhone與Android),那麼這個【Wunderlist】記事備忘軟體的確還不錯,畫面簡潔、使用簡單.

在 Mac/PC 电脑上发送文字到苹果 iPhone、iPad、iPod touch 剪切板的免费应用:Clipboard

- iPotato - 苹果fans-中文 Apple Blog
    Clipboard 是一款免费 App,功能很实用:把文字直接从电脑上发送到苹果 iOS 设备上,iOS 那边可以将文字复制—粘贴到其它应用中. 这样在电脑上打字或从浏览器/文档里复制文字,比在 iPhone、iPod touch 上爽多了(iPad 打字还好,不过也能用它发送).     首先到 Clipboard 官网下载客户端,基于 Adobe Air 的,所以 Mac、PC 都能用.

新的 Mac Mini

- delphij - Gea-Suan Lin's BLOG
為了螢幕的問題弄得相當疲倦 XD. 這幾天可以在一般的店家通路買到新的 Mac Mini,但沒事先做好功課,配上 Dell U2711 讓人碰了不少壁…. 買完 Mac Mini 後第一個想法是用 DVI & USB KVM 同時接 PC 與 Mac Mini,於是順便買 ATEN CS682,裝上去後發現只能支援到 1920×1080… 想想算了,其他地方也還用的到.

Mac迅雷正式上架Mac App Store

- Woooon - cnBeta.COM
今天在Mac App store中赫然发现Mac迅雷的身影. 摘录信息如下:Thunder For Mac 是基于Mac平台的下载软件,支持P2SP,BT和eMule下载协议;高速可靠的数据传输和简约的界面操作,让下载更轻松.