模拟和测试其他浏览器

确保你的网站能够在Chrome和Android上正常运行后，你的工作并没有结束。即使Device Mode(设备模式)可以模拟一系列其他设备，如iPhone，我们鼓励你查看模拟其他浏览器的解决方案。

TL;DR

  • 当您没有特定设备时，或想做某些事情的抽查，最好的选择是在浏览器中直接模拟设备。
  • 设备仿真器和模拟器让你在工作站的各种设备上模拟你开发网站。
  • 基于云的模拟器允许你跨不同平台为你的网站自动化单元测试。

浏览器模拟器

浏览器模拟器非常适合用来测试网站的响应能力，但他们无法模拟在真实移动浏览器上看到的API的差异，CSS支持，和某些特定行为。在实际设备的浏览器上运行来测试您的网站，以确保一切都如预期的那样运行。

Firefox的响应式设计视图

Firefox有一个响应式设计视图，可以让你不局限于特定设备，反而是让你探索你的设计在常见的屏幕大小中是如何变化的，或者通过拖动边缘来设置或自己的视窗大小。

Edge的F12模拟器

要模拟 Windows Phone 手机，请使用 Microsoft Edge 的内置模拟器。

由于Edge不具有传统兼容性，使用IE 11的模拟器来模拟页面在旧版本的Internet Explorer中的外观。

设备仿真器和模拟器

设备仿真器和模拟器不仅模拟浏览器环境，而且模拟整个设备。它们对于测试那些需要操作系统集成的事情很有用，例如虚拟键盘的表单输入。

Android 仿真器

目前，没有办法在Android仿真器上安装Chrome。但是，您可以使用Android浏览器，Chromium 内核 和 Firefox for Android，我们将在本指南的后面部分介绍。Chromium 内核使用与Chrome相同的渲染引擎，但没有任何浏览器的特定功能。

Android模拟器集成在Android SDK中，您需要从这里下载。然后按照说明设置虚拟设备,并启动仿真器。

一旦你的模拟器启动，点击浏览器图标，您就可以在Android老版本的浏览器上测试您的网站。

Android 上的 Chromium 内核

要为Android安装Chromium 内核， 需要开启模拟器并在命令提示符下运行以下命令：

git 
clone
 https://github.com/PaulKinlan/chromium-android-installer.git
chmod u+x ./chromium-android-installer/\*.sh
./chromium-android-installer/install-chromeandroid.sh

现在，您可以使用Chromium内核测试你的网站了。

Android 上的 Firefox

与Chromium内核类似，你可以下载一个APK来将Firefox安装到模拟器。

从中下载正确的.apk文件。

您可以将文件安装到打开的模拟器上或使用以下命令连接Android设备：

adb install 
&
lt;path to APK
&
gt;/fennec-XX.X.XX.android-arm.apk

iOS 模拟器

Mac OS X 的 Xcode 自带了 iOS模拟器，您可以在 App Store 中安装 Xcode。

完成后，通过Apple的文档了解如何使用模拟器。

注意:

为了避免每次你想使用iOS模拟器时需要打开Xcode，你可以右键单击Dock中的iOS模拟器图标，并选择`Keep in Dock`。现在只要在需要用到时点击此图标就可以了。

Modern.IE

Modern.IE虚拟机可以让你通过VirtualBox（或者VMWare）虚拟机来访问不同版本的IE浏览器。在下载页面选择一个虚拟机,下载对应的版本。

基于云的仿真器和模拟器

如果您不能使用模拟器，并且没有真实设备，那么基于云的模拟器将是一个不错的选择。基于云的模拟器区别实际设备和本地仿真器的一个重要优势是您可以为不同平台的网站自动执行单元测试。

  • BrowserStack(商业版)
    • 是最容易用来做手动测试的。您选择一个操作系统，选择您的浏览器版本和设备类型，选择一个网址来浏览，它会开启一个处于托管状态的虚拟机给你用来互动。你也可在在同一个窗口打开多个模拟器，这样你可以在同一时间测试你应用程序的设计体验。
  • SauceLabs(商业版)
    • 允许您在模拟器中运行单元测试，这在脚本流经你的网站和查看在各种设备上的录像时是非常有用的。你也可以在你的网站上做手动测试。
  • Device Anywhere(商业版) 没有模拟器，但是可以使用通过远程控制的真实设备。这在当你需要在特定设备上重现某一个问题（在以前的指南中都没有的错误）时是非常有用的。

说明

翻译自：https://developers.google.com/web/tools/chrome-devtools/device-mode/testing-other-browsers

results matching ""

    No results matching ""