移动端 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）

吐槽

原标题：移动端 Web 网页调试技巧

关键词：web