移动调试

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 的信息。 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 协助开发 移动调试 可以在微信中查看位于测试环境的网页 确保本机和移动设备在同一局域网网段中 将移动设备的网络代理配置到：http://**.**.**.**（ PC或Mac 的IP），端口： 9973 iOS： 设置 – 无线局域网 – 选中网络 – HTTP代理手动 Android： 设置 – WLAN – 长按选中网络 – 修改网络 – 高级 – 代理设置 – 手动 重启微信，并在微信中访问网页

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

在小溪里所在的公司里面，设置网络代理的步骤： 连接 Wifi 弹出验证窗口，输入公司账户 设置网络代理

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

转载于:https://my.oschina.net/fdragon/blog/665665