认识达内从这里开始

认真做教育专心促就业

移动端 Web 网页调试技巧

发布：武汉IT培训
来源：达内新闻
时间：2016-04-29 09:45

    本文主要列举了调试本地网页、查看测试环境网页的各种方法，涵盖了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 – 长按选中网络–修改网络–高级–代理设置–手动
    重启微信，并在微信中访问网页

< 上一篇：武汉it培训：前端开发必备的三种思维

下一篇：哪些原因会导致程序员跳槽？ >