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

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

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

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

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

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

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

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

转载于:https://www.cnblogs.com/yaoliang11/p/3288465.html

通过Mac远程调试iPhone/iPad上的网页(转)相关推荐

safari 调试打印刚加载界面时缓存的log信息 iOS Safari调试iPhone设备上的网页
文章目录 1.开启电脑端safari的调试 2.开启手机端iphone的safari调试 3.打印刚加载界面时的log信息:进入到要调试的网页后点击刷新(reload)就可以了 4.参考博客 1.开启 ...
如何在Mac上调试iphone 打开的safari网页
如果pc浏览器或者模拟器没有问题,iPhone手机上运行时出现了问题,首先使用iPhone自带的Safari浏览器查看一下网页,如果浏览器中出现了同样的问题,可以配合Mac上的Safari进行调试,找 ...
点击iPhone/iPad上的加密相册或保险箱提示“无法安装加密相册或保险箱，App Store已不提供此应用”解决方案
点击iPhone/iPad上的加密相册.保险箱.加密相册Pro.保险箱Pro提示"无法安装加密相册或保险箱,App Store已不提供此应用"解决方案 1.本文适用条件: 1)任何 ...
iphone查看网页源代码_如何在iPhone或iPad上查看网页源代码
iphone查看网页源代码 Mobile Safari is a really great browser - it's fast, easy to use, and has most of the ...
如何在iphone/ipad上安装低版本App
当我们在iphone/ipad上安装新应用的时候,系统可能会提示此应用需要更高的系统版本,就比如说我现在是ios5,但是,此应用需要ios7以上的系统版本! 其实苹果是提供低版本下载的,只是系统不会提 ...
在Windows上调试iPhone/iPad的safari浏览器
众所周知在安卓上面可以使用adb链接电脑,使用Chrome Inspect进行调试网页(QQ/微信的x5内核也可以),但是自从换了iPhone之后就没有这个乐趣了,所以我便开始摸索起来如果使用Chr ...
移动端html网页真机调试,Mac端调试iphone移动端网页
0.前言今天写好了一个页面,在mac上跑的好好的,结果手机打开直接白屏了.打开chrome的移动端模拟,但是模拟上也是好的,所以就只能开启真机调试了. 1.配置在iOS设备上打开允许调试:设置→S ...
mac远程登陆iphone，和密码修改
原文地址:http://www.cnblogs.com/xiaodao/archive/2012/04/10/2439854.html 在不设置密码的公共wifi网络或3G环境,没更改初始密码的很容易 ...
VSCode XDebug 远程调试虚拟机CentOS7上PHP项目
声明以下[参考]链接,如有侵权,请联系删除,在此先感谢在网络上无私奉献的人们~ 如有错误,请联系更正文章目录声明背景本机配置虚拟机配置 1. 设置代码文件共享 2. 修改xdebug配置 ...

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

通过Mac远程调试iPhone/iPad上的网页(转)相关推荐

最新文章

热门文章