您的工作不只是确保您的网站在 Chrome 和 Android 上顺畅运行。尽管 Device Mode 可以模拟 iPhone 等一系列其他设备,我们仍建议您查看其他浏览器的模拟解决方案。
摘要
- 如果您没有特定设备,或者想要对设备进行抽查,最好的选择是直接在浏览器中模拟设备。
- 借助设备模拟器,您可以通过工作站在一系列设备上模拟开发网站。
- 借助基于云的模拟器,您可以在不同平台上对网站自动执行单元测试。
浏览器模拟器
浏览器模拟器非常适合于测试网站的响应能力,但它们无法模拟 API 差异、CSS 支持,以及您可在移动浏览器中看到的某些行为。请在真实设备上运行的浏览器上测试您的网站,确保一切按预期运行。
Firefox 的自适应设计视图
Firefox 有一个自适应设计视图,建议您不要再考虑特定设备,而是通过拖动边缘来探索您的设计如何在常见屏幕尺寸或您自己的尺寸下发生变化。
Edge 的 F12 模拟
如需模拟 Windows Phones,请使用 Microsoft Edge 的内置模拟。
由于 Edge 不提供旧版兼容性,因此请使用 IE 11 的模拟来模拟您的网页在旧版 Internet Explorer 中的显示效果。
设备模拟器
设备模拟器不仅可以模拟浏览器环境,还可以模拟整个设备。它们对于测试需要操作系统集成的内容很有用,例如带虚拟键盘的表单输入。
Android 模拟器
Android 模拟器中的 Stock Browser
目前,无法在 Android 模拟器上安装 Chrome。不过,您可以使用 Android 浏览器、Chromium Content Shell 和 Android 版 Firefox(我们将在本指南的后面部分进行介绍)。Chromium Content Shell 使用相同的 Chrome 渲染引擎,但不包含任何浏览器专用功能。
Android 模拟器附带 Android SDK,您需要在此处下载。然后,按照说明设置虚拟设备并启动模拟器。
模拟器启动后,点击“Browser”图标,您就可以在旧版 Stock Browser for Android 上测试网站了。
Android 上的 Chromium Content Shell
Android 模拟器内容 Shell
如需安装 Chromium Content Shell for Android,请保持模拟器运行并在命令提示符下运行以下命令:
git clone https://github.com/PaulKinlan/chromium-android-installer.git
chmod u+x ./chromium-android-installer/\*.sh
./chromium-android-installer/install-chromeandroid.sh
现在,您可以使用 Chromium Content Shell 测试您的网站了。
Android 上的 Firefox
Android 模拟器上的 Firefox 图标
与 Chromium 的 Content Shell 类似,您可以获取一个 APK 以将 Firefox 安装到模拟器上。
从 https://ftp.mozilla.org/pub/mozilla.org/mobile/releases/latest/ 下载合适的 .apk 文件。
在这里,您可以使用以下命令将文件安装到打开的模拟器或连接的 Android 设备上:
adb install <path to APK>/fennec-XX.X.XX.android-arm.apk
iOS 模拟器
适用于 Mac OS X 的 iOS 模拟器附带 Xcode,您可以从 App Store 安装。
完成后,请参阅 Apple 文档,了解如何使用模拟器。
Modern.IE
现代 IE 虚拟机
Modern.IE 虚拟机可让您通过 VirtualBox(或 VMWare)在计算机上访问不同版本的 IE。请在此处的下载页面上选择一个虚拟机。
云端模拟器
如果您无法使用模拟器并且无法访问真实设备,那么云端模拟器是次优之选。与真实设备和本地模拟器相比,云端模拟器的一大优势是可以跨不同平台对网站自动执行单元测试。
- BrowserStack(商用)是最便于进行手动测试的平台。您选择操作系统,选择浏览器版本和设备类型,选择要浏览的网址,然后系统将启动一个您可以与之互动的托管虚拟机。您还可以在同一屏幕中启动多个模拟器,以便同时测试应用在多个设备上的外观和风格。
- SauceLabs(商用)允许您在模拟器内运行单元测试,这对于将您网站上的流程编写成脚本,并在之后在各种设备上观看视频录制非常有用。您也可以对网站进行手动测试。
- Device Anywhere(商用)不使用模拟器,而是使用您可以远程控制的真实设备。如果您需要在特定设备上重现问题,但在之前指南中的任何选项上都看不到 bug,这会非常有用。
- LambdaTest(商用)可帮助您在 2,000 多种浏览器和操作系统的组合上执行手动跨浏览器测试。用户将能够录制有关复杂 bug 的视频,并通过 MS Teams、Slack 等集成服务分享视频。用户可以通过并行运行测试来加快测试速度。