移动端 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浏览器上打开的网页，还须要×××，可是却没法查看安卓设备上国产厂商封装的浏览器，如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 模拟器在运行时可能会卡。

访问测试环境的网页

主要针对测试工程师，前端工程师学习起来也是 so easy 的。

静态IP

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

设置步骤：

1. 记住自动分配的 IP

2. 设置对应设备的静态 IP

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

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

网络代理

原理简析：在 PC 或Mac 上已经设置成功了测试环境，而移动设备经过网络代理访问 PC 或 Mac 上的网络设置，就能够访问测试环境了，不管是浏览器仍是微信。

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

• Fiddler 代理，只适用于windows系统

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

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

微信web开发者工具

官网地址

• 使用本身的微信号来调试微信网页受权

• 调试、检验页面的 JS-SDK 相关功能与权限，模拟大部分 SDK 的输入和输出

• 使用基于 weinre 的移动调试功能

• 利用集成的 Chrome DevTools 协助开发

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

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

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

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

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

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

PS：在小溪里的电脑上并无像官网宣传的那样能够审查元素

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

1. 链接 Wifi

2. 弹出验证窗口，输入公司帐户

3. 设置网络代理

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

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