如何调试移动端网页
发布网友
发布时间：2022-04-20 21:14
共2个回答
热心网友
时间：2022-05-12 06:50
打开 仿真面板。
2
可以在 Device 选择设备。
可以在Screen 设置模拟的屏幕方面的东西，设置分辨率，屏幕尺寸。
可以在 User Agent 设置 客户端Agent
可以在 sensors 设置感应等，模拟触屏操作。
3
配置好之后，点击 Emulate 。开始进行仿真。
（选择Device需要点击emulate)其余选项是在修改后自动改变。
4
如何假设 平板旋转屏幕？
可以在 screen中，点击分辨率中间的互换按钮就可以了。
使用Chrome浏览器调试，配置好调试设置之后，可以自由输入 网址查看 在移动设备上的现实情况。
热心网友
时间：2022-05-12 08:08
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 协助开发
移动调试
可以在微信中查看位于测试环境的网页
确保本机和移动设备在同一局域网网段中
将移动设备的网络代理配置到：http://\*\*.\*\*.\*\*.\*\*（ PC或Mac 的IP），端口： 9973
iOS： 设置 – 无线局域网 – 选中网络 – HTTP代理手动
Android： 设置 – WLAN – 长按选中网络 – 修改网络 – 高级 – 代理设置 – 手动
重启微信，并在微信中访问网页
设置网络代理的步骤：
1、连接 Wifi
2、弹出验证窗口，输入公司账户
3、设置网络代理
PS：连接 Wifi后，要确保没有设置网络代理，这样才可以弹出验证窗口。
