本文主要列举了调试本地网页、查看测试环境网页的各种方法,涵盖了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后,浏览器可以访问位于测试环境的网页,但微信却只能访问位于正式环境的网页。
设置步骤:
记住自动分配的IP,设置对应设备的静态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协助开发
移动调试可以在微信中查看位于测试环境的网页
确保本机和移动设备在同一局域网网段中
将移动设备的网络代理配置到:(PC或Mac的IP),端口: 9973
iOS:设置–无线局域网–选中网络– HTTP代理手动
Android:设置– WLAN – 长按选中网络–修改网络–高级–代理设置–手动
重启微信,并在微信中访问网页