Safari 前端开发调试 iOS 完美解决方案
转http://www.2cto.com/kf/201403/283404.html
- afari 前端开发调试 iOS 完美解决方案
-
在日趋现代化的 Web 网络中,各种现代浏览器和移动终端设备的用户百分比越来越高。对于我们 Web 前端开发者来说,运行 iOS Safari 浏览器的苹果移动设备对我们来说更是不容忽视的。然而当我们需要对前端页面进行测试调试时,桌面版 Safari 的表现并不是与移动版 Safari 一模一样的(主要缘起 CSS 中
device-width
的判断),因此我们只能直接在 iOS 设备上对 Safari 进行测试与调试。本文主要介绍由苹果官方提供的 iOS 设备上 Safari 浏览器的前端调试解决方案的详细操作方法。笔者采用的是:运行在 iOS 6.0.1 上的移动版 Safari 和运行在 OS X Mountain Lion 上的桌面版 Safari(Windows 版本的 Safari 暂无此功能)。理论上对 iPhone、iTouch、iPad 等苹果移动设备上的移动版 Safari 浏览器均可行。
在设置中开启功能
【iOS 终端】:设置 → Safari → 高级 → Web 检查器 → 开。(如图)
【OS X】:Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单。(如图)
连接移动设备与计算机并启用调试器
在 OS X 中启动 Safari 之后,以 USB 电缆正常接入 iOS 设备,并在此移动设备上启动 Safari。此时点击计算机上的 Safari 菜单中的“开发”,可以看到有 iOS 设备的名称显示,其子菜单项即为移动设备上 Safari 的所有标签页,点击任意一个开始调试。(如图)
在这个调试器里,我们可以像使用桌面操作系统的 Safari 的调试器一样,做各种调试工作,譬如 HTML 元素、CSS 及盒模型等的查看和即时编辑、JavaScript 调试器、网页元素时间轴、DOM 元素查看器等各种功能。(如图)
HTML 结构及对应 CSS
同期 iPhone 屏幕截图
HTML 结构及对应 CSS 即时编辑
同期 iPhone 屏幕截图
JavaScript 即时调试
同期 iPhone 屏幕截图
网络请求时间线
Safari 前端开发调试 iOS 完美解决方案的更多相关文章
- web前端开发与iOS终端开发的异同[转]
* {-webkit-tap-highlight-color: rgba(0,0,0,0);}html {-webkit-text-size-adjust: none;}body {font-fami ...
- IE, FF, Safari前端开发常用调试工具
一些前端开发 IE 中的常用调试工具: Microsoft Script Debugger —— Companion.JS need to install this Companion.JS —— J ...
- Web前端开发与iOS终端开发的异同
语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,不像后台想用什么就用什么,iOS只能用Objective-C,前端只能javascrip ...
- 前端开发在IOS端遇到的一个诡异问题(Delegate 失效)
一.前言 最近同事问到一个问题,一个前端页面在IOS端真机测试下出现一个比较诡异的问题,如果没有遇到过估计也是一筹莫展.今天特此记录一下,或许能帮到后面遇到这个问题的朋友少绕一些弯路.这是关于JQue ...
- 手机前端开发调试利器 – vConsole
我们在开发手机版网页的时候,常常会出现下面的情景: (1) 开发时,在自己电脑上运行得好好的,在手机上打开就挂了,但是手机上又看不到error log: (2) 上线后,某用户表示页面失灵,但我们自己 ...
- 配置移动前端开发调试环境(nodejs+npm+weiner的安装和配置使用)
这段时间发现做移动端的开发调试是一大难题,网上逛了逛发现有一些工具可用,如chrome的远程调试,实际测试过程中我始终调试不成功,听说被墙后是不行的,所以最终找了如下的方法. 因为基于nodeJS环境 ...
- 手机前端开发调试利器-vConsole
最近因为做抽奖页面,在android上可以使用手机连上电脑后用chrome浏览器chrome://inspect进行页面探测,但是ios中的页面就不能这样探测 在网上搜索后发现此插件,大大解决了问题 ...
- 一探前端开发中的JS调试技巧
前言 调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...
- 前端开发中的JS调试技巧
前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...
随机推荐
- linux chomd 学习
chomd -R 777 directory_name :递归地给directory目录下所有文件和子目录的属主分配读的权限 ------2016-10-31 -- source: Linux chm ...
- 原!!jar包 --可执行exe文件--安装包
这几天由于部门统计名单,都是一边报,一边统计,感觉麻烦,写了个小工具,做成安装包.其他不多说,网上都有,我就自己按照网上操作,碰到了一些问题,对这些问题说下. ----------废话少说------ ...
- 控制反转(IOC: Inverse Of Control) & 依赖注入(DI: Independence Inject)
举例:在每天的日常生活中,我们离不开水,电,气.在城市化之前,我们每家每户需要自己去搞定这些东西:自己挖水井取水,自己点煤油灯照明,自己上山砍柴做饭.而城市化之后,人们从这些琐事中解放了出来,城市中出 ...
- Android开发--Intent的应用
1.概述 Intent负责对应用中一次操作的动作,动作涉及的数据,附加的数据进行描述,起到媒介的作用.通过Intent对象指定一个activity,利用startActivity或 startActi ...
- WPF 让Enter键按下时默认为某按钮(Button)事件
在编写web程序时我们经常用到按Enter键来提交表单,在WPF中我们也常常需要这样的功能:例如在填写登录框信息时当填写完密码之后我希望直接按Enter键就能完成登录操作.这个需求如何来完成呢? 其实 ...
- cookie 路径问题
Path – 路径.指定与cookie关联的WEB页.值可以是一个目录,或者是一个路径.如果http://www.zdnet.com/devhead /index.html 建立了一个cookie,那 ...
- windows 7 32bit安装 python3.5.0 安装错误 0x80240017 -未指定错误
日志显示如下: [0F60:03D4][2015-10-20T10:47:52]i001: Burn v3.10.0.1823, Windows v6.1 (Build 7600: Service P ...
- eclipse真机调试显示Target unknown的解决方法
eclipse的android模拟器调试是个硬伤,非常非常卡,严重影响工作效率.个人推荐使用第三方模拟器Genymotion,不了解的可以搜索下安装.你会发现它真心好用,但需要官网注册的. 各种调试完 ...
- Rhel6-moosefs分布式存储配置文档
MFS 特性: 1. Free(GPL) 2. 通用文件系统,不需要修改上层应用就可以使用 3. 可以在线扩容,体系架构可伸缩性极强. 4. 部署简单. 5. 高可用,可设置任意的文件冗余程度(提供比 ...
- iframe自定义高度
function setIframeHeight() { var iframe=document.getElementById("iframe_id"); iframe.heigh ...