移动端 Web 网页调试技巧

Posted 刘星石

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端 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 – 长按选中网络 – 修改网络 – 高级 – 代理设置 – 手动
  3. 重启微信，并在微信中访问网页

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

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

  1. 连接 Wifi
  2. 弹出验证窗口，输入公司账户
  3. 设置网络代理

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

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

以上是关于移动端 Web 网页调试技巧的主要内容，如果未能解决你的问题，请参考以下文章

优雅的用eruda在移动端上调试网页『未完』

移动端兼容

移动web开发

Chrome 调试技巧

Chrome 调试技巧

借助FreeHttp为任意移动端web网页添加vConsole调试