移动端 Web 网页调试技巧

原文出处： 盛瀚钦

本文主要列举了调试本地网页、查看测试环境网页的各种方法，涵盖了PC、iPad、移动端的调试技巧。

本文的不足之处在于，小溪里暂时还没有找到调试位于微信中和安卓各国产浏览器上的网页。

相关设备概念：

PC

：主要指以 Windows 系统为代表的台式机或笔记本，其通常为 1 倍屏

MacBook

：主要指 MacBook Pro Retina，其为 2 倍屏，但

Mackbook Air

为 1 倍屏

iPad

：主要指以 iPad Air Retina 和 iPad Mini Retina 为代表的，其为 2 倍屏，且按

1024 x 768

的“宽高”渲染网页。这里 iPad Pro Retina 是按

1366 x 1024

的“宽高”渲染网页，在CSS的媒体查询中可以按“笔记本”的断点来设置

移动端：主要是指手机。

iPhone 5s

及以下设备：按

320

的“宽”渲染网页，其为 2 倍屏幕

常规安卓设备：通常分辨率为

1080 x 1920

，按

360

的“宽”渲染网页，其为 3 倍屏幕

iPhone 6

：分辨率为

750 x 1344

，按

375

的“宽”渲染网页，其为 2 倍屏幕

iPhone 6 plus

：实际分辨率为

1242 x 2208

，按

414

的“宽”渲染网页，其为 3 倍屏幕。PS：貌似 iPhone 6 plus 实际显示器上渲染后的分辨率为

1080 x 1920

。

本地开发网页

前端在开发移动端网页时，通常使用

localhost

在本地访问网页，在除本机外的设备上都需要换成

IP

访问。

ifconfig

： OS X 系统上查看网络信息的命名，在

Macbook Pro

上

en0

代表 Wifi，所以可以用

ifconfig en0

直接查看 Wifi 的信息。

ipconfig

：Windows 系统上查看网络信息的命令。

Chrome Emulation

即时“仿真”调试网页

Chrome Emulation

使用的当前

Chrome

版本的

Webkit

或

Blink

渲染的网页，跟

iPhone

或安卓设备上的浏览器上渲染出的网页效果可能存在差异，如安卓 UC 浏览器就存在各种各样的小 bug。

审查元素：右击或使用快捷键(Mac：command + option + i)

调出

Emulation

：再审查元素后，点击对应的图标或者使用快捷键（Mac：command + option + m）

吐槽
PC或Mac连接安卓设备，想用

Chrome

审查元素查看安卓设备上

Chrome

浏览器上打开的网页，还需要

FQ

，但是却无法查看安卓设备上国产厂商封装的浏览器，如UC浏览器、QQ浏览器。

Safari

即使调试网页

“响应式设计模式”

Safari

在 “开发”菜单中有“响应式设计模式”，里面有常见的

iOS

设备，如 iPhone 4s 、 iPhone 5s 、 iPhone 6s 、iPhone 6s plus 、 iPad mini 4 、 iPad Air 2 、 iPad Pro等。
当然，这里的

Safari

的内核应该还是基于当前系统的，与 iOS 设备上各自的 Safari 上可能还存在着差异。
超级棒的审查元素
在

Safari

上不仅可以调试浏览器本身打开的网页，还能打开下文中提到的

Xcode Simulator

打开的网页，甚至可以打开用 USB 连接的 iPhone/iPad。

Xcode Simulator

模拟器

Xcode Simulator

是可以模拟各版本 iOS 系统的各种设备，比

Safari

更棒的地方在于它模拟了各种 iOS 系统上的 Safari，因此可以复现各种奇葩 bug。

系统涵盖了从 iOS 8.0 到 iOS 9.2 的各个版本、tvOS 、 watchOS

设备涵盖了 iPhone 、 iPad 、tvOS 、 Apple Watch 、 Apple TV

小溪里推荐下载 iOS 8.1，因为自带的最新 iOS 模拟器在运行时可能会卡。

访问测试环境的网页

静态IP

原理简析：静态 IP 其实重心是在移动设备设置特定 DNS，而特定 DNS 是与测试环境有关系的。
不足之处：在iPad 及 移动端上配置静态 IP 后，浏览器可以访问位于测试环境的网页，但微信却只能访问位于正式环境的网页。

设置步骤：

记住自动分配的 IP

设置对应设备的静态 IP

iOS：设置 – 无线局域网 – 选中网络 – IP地址 – 静态

Android：设置 – WLAN – 长按选中网络 – 修改网络 – 高级 – 静态 IP

网络代理

原理简析：在 PC 或Mac 上已经设置成功了测试环境，而移动设备通过网络代理访问 PC 或 Mac 上的网络设置，就可以访问测试环境了，无论是浏览器还是微信。

设置代理的常见方式（具体请自行百度）

Fiddler 代理，只适用于windows系统

Charles 代理，适用于OS X系统（即Mac电脑）

微信web开发者工具（以下简称“微信工具”），适用于windows和Mac

微信web开发者工具

]官网地址


移动调试
可以在微信中查看位于测试环境的网页

确保本机和移动设备在同一局域网网段中

将移动设备的网络代理配置到：http://\*\*.\*\*.\*\*.\*\*（ PC或Mac 的IP），端口： 9973

iOS： 设置 – 无线局域网 – 选中网络 – HTTP代理手动

Android： 设置 – WLAN – 长按选中网络 – 修改网络 – 高级 – 代理设置 – 手动

重启微信，并在微信中访问网页

PS：在小溪里的电脑上并没有像官网宣传的那样可以审查元素

在小溪里所在的公司里面，设置网络代理的步骤：

连接 Wifi

弹出验证窗口，输入公司账户

设置网络代理

PS：连接 Wifi后，要确保没有设置网络代理，这样才可以弹出验证窗口。

QQ技术交流群290551701 http://cxy.liuzhihengseo.com/554.html