html脚本ios调试不了,Safari 前端开发调试 iOS 完美解决方案（iPhone/iTouch 等）

在日趋现代化的 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 屏幕截图：

网络请求时间线：

html脚本ios调试不了,Safari 前端开发调试 iOS 完美解决方案（iPhone/iTouch 等）相关推荐

表单html遇到的问题及处理,Web前端开发中常见问题及解决方案
Web前端开发中常见问题及解决方案时间:2017-04-24 来源:web前端开发小赢家作为一名web前端开发工程师,我们在工作时免不了会遇到各种各样的问题.因为web前端开发相对于Jav ...
web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点. 语言前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行 ...
vconsole插件_手机前端开发调试利器 – vConsole
我们在开发手机版网页的时候,常常会出现下面的情景: (1) 开发时,在自己电脑上运行得好好的,在手机上打开就挂了,但是手机上又看不到error log: (2) 上线后,某用户表示页面失灵,但我们自己 ...
前端开发调试之代理配置
前端开发往往需要在本地调试环境和线上环境之间灵活切换,以将要调试的一个页面为例,页面引用了如下的静态资源,要想在本地开发调试下面引入的js代码,最直接的方法是在把引入的资源路径改成本地调试路径,并起一 ...
ios闪屏问题 vue_VUE前端界面在iOS中遇到的坑
前段时间,公司用前端做了一个微型图片生成界面,通过考虑,选择使用vue多页面进行编写,在界面编写完成之后,本地浏览器进行测试,发现一切都很顺利,然后嵌入到APP端进行联合测试.前期,界面在Androi ...
开发调试指令大全--（MTK开发调试命令）
MTK无线驱动开发调试手册 1.前言 2.MTK Wifi芯片简介 2.1 单频WIFI芯片信息 2.2 WiFi驱动版本 3.MTK 无线驱动开发调试 3.1 常用命令行 3.1.1 设置WLAN驱 ...
开发调试指令大全--（realtek开发调试命令）
1.术语与缩写解释缩写.术语解释 BBP Baseband Processor,基带处理,指PHY,物理层. NIC Network Interface Card,网卡也叫"网络适配器& ...
The Things Network LoRaWAN Stack V3 学习笔记 2.7.1 Web 前端开发调试
文章目录前言 1 官方介绍 2 本地实践 2.1 脚本准备 2.2 操作步骤 END 前言上一篇研究了如果编译运行 Web 前端,这一篇研究如何在开发模式下调试 Web 前端. 小能手这段时间在学 ...
前端开发安卓ios兼容问题集合（持续更新~）
小程序clip方法(官方未修复) 在小程序中使用canvas画圆角图形(比如带圆角的背景图或者圆形头像)都需要使用clip方法当连续使用次clip方法时,安卓机型和模拟器显示正常,ios会出 ...

html脚本ios调试不了,Safari 前端开发调试 iOS 完美解决方案（iPhone/iTouch 等）

html脚本ios调试不了,Safari 前端开发调试 iOS 完美解决方案（iPhone/iTouch 等）相关推荐

最新文章

热门文章