跨浏览器测试：在一台机器上测试所有主流浏览器

Question

跨浏览器测试：在一台机器上测试所有主流浏览器

internet-explorerbrowsercross-browservirtualization

141

本指南的目的：

在一台计算机上同时运行多个未经修改的本地版本的Internet Explorer、Safari、Opera、Chrome和Firefox。

第1部分覆盖内容如下：

目录
需要测试哪些浏览器？
如何创建一个快速启动且永不过期的Windows XP虚拟机？
哪里可以下载必要的软件（VM镜像、浏览器等）？

第2部分同样包含以下内容：

IE、Firefox、Opera、Chrome和Safari的安装和配置指南。
开发者工具和快捷方式。
时间和磁盘空间成本。

许多章节是相互独立的，例如关于运行多个浏览器版本的说明通常适用。

- Rob W

4

我建议使用browserstack.com作为一种简单的替代方案。 - Nakul

1

对于任何试图创建Windows 7虚拟机的人：VirtualBox默认会将Windows 7 vhd文件挂载为SATA，您需要卸载它并改为挂载为IDE - 否则Windows 7将尝试修复安装并失败。此外，只有在禁用虚拟机设备菜单中的鼠标集成后，我才能使鼠标光标正常工作。 - Ben

相关：https://dev59.com/n3RB5IYBdhLWcg3wl4Sc - Denilson Sá Maia

@RobW，尽管这个页面的内容非常有价值和棒，但它根本不是一个问题，很可能会成为一个糟糕答案的磁铁...你能否设法将其重新排列成一个问题？ - DaveRandom

3

@Dave 这并不是一个常规问题，但简洁的问题说明了将要回答的永恒问题以及回答的格式。这就是这个页面的明确目标（回过头来看，这可能更适合在一个独立的博客上）。有两个关于 IE 的有用答案，还有一个已删除的有关配置 Safari 的答案，因此没有成为错误答案的迹象。如果您有任何具体的改进意见，请提出修改建议。 - Rob W

3个回答

62

第二部分内容（跳转至：第一部分）

4. Internet Explorer
5. Firefox
6. Opera
7. Chrome
8. Safari
9. 开发者工具（及快捷键）
10. 安装和磁盘空间测量设置时间
• 每个浏览器所需时间（安装和配置）
11. 最佳使用方法
• 主页为 http://10.0.2.2:8888/

安装和配置

浏览器配置提示：

主页
禁用 "默认浏览器" 和 "更新" 的检查。
激活开发者工具

4. Internet Explorer

Windows 7不允许运行旧版本的IE^{但请参见下面的注释}，因此需要Win XP虚拟机。

IE无法降级，因此从最低版本开始，在单独的Sandboxie中升级IE。在升级之前设置最低浏览器版本的首选项，这样您只需设置一次主要首选项即可。

IE6 - 默认安装在WinXP中
IE7/IE8 - 在Sandboxie中安装（WinXP）
IE9+ - 从modern.IE网站获取预构建的Windows虚拟机映像。
这些映像在第一次使用后30天过期。当映像过期时，它们会在使用1小时后关闭。如果不想每次重新创建映像，请在激活映像之前更改虚拟机的硬件时钟。
例如，如果您使用VirtualBox，请启动终端并发出以下命令（用合理的名称替换大写名称）：
VBoxManage modifyvm NAME_OF_VM --biossystemtimeoffset <OFFSET IN MS, prefixed by plus or minus>

这个网站提供了IE6（甚至IE5.5）的完全离线安装程序在此处。

对于IE6和IE7，应该安装Internet Explorer开发者工具栏。IE8+已经内置了F12开发者工具。

配置

打开IE6设置：主页、安全性、Cookies和默认浏览器。
IE7：通过（IE7 Sandboxie）注册表消除首次运行页面。请参见此Microsoft TechNet论坛上的帖子。
IE8：消除“设置Windows Internet Explorer 8”的对话框。这可以通过启动IE8，然后单击“稍后”，或者修改注册表来完成。

实际上，通过应用程序虚拟化在Windows 7中运行IE6-8是可能的。VMWare ThinApp效果很好，但设置需要更多时间，因为您需要捕获Internet Explorer的安装过程。此外，该软件包非常昂贵（虽然可以自由获取keygen，但不道德）。

5. 火狐浏览器

选项1（懒人专属）:
Utilu Mozilla Firefox Collection。该工具包含所有火狐浏览器版本的安装程序（200+ MB），同时还包括Firebug、Web开发者工具栏和Flash。

选项2:
多个火狐浏览器版本可以轻松安装并同时运行。

Download 下载Mozilla官方的Profile Manager。
从http://releases.mozilla.org/pub/mozilla.org/firefox/releases/下载相关的Firefox版本。旧版本可以在ftp.mozilla.org找到。
安装每个Firefox版本。方便起见，选择一个主目录（“Firefox”），并使用版本号作为子目录的名称（“3.6”）。
扩展：启动最旧的Firefox版本，并获取您喜欢的扩展：
- Firebug - 对于旧版本的Firefox来说是必备的。对于最新版本的Firefox来说不是必须的，因为它们有一套很好的内置开发工具。
- HttpFox - 一个简单而有效的测量HTTP请求的工具。
- Web Developer - 一个极其有用的用于Web开发的工具栏。可以节省很多时间。
- Console² - 增强了内置的控制台(Ctrl Shift> J)。
首选项：工具 > 选项（Windows），编辑 > 首选项（Linux）
- 常规：主页
- 安全性：取消所有设置，除了“当网站尝试安装附加组件时警告我”。
  （不要忘记通过底部的按钮查看警告消息设置）。
- 高级：
  - 常规：
    - 检查默认浏览器：关闭
    - 提交崩溃报告：关闭
  - 更新：禁用所有更新
清理：关闭所有选项卡，按下Ctrl Shift Del并勾选所有内容。然后关闭Firefox。
Firefox的Profile Manager：
- 通过复制选项复制每个配置文件。
- 会出现一个对话框^截图。选择适当的名称（例如Firefox 3.6）和目标。
- 使用Firefox版本选项为配置文件选择默认的Firefox版本。
- 还要勾选启动新实例[-no-remote]框，以允许同时运行多个Firefox版本。
完成
- 使用启动Firefox按钮启动Firefox实例。
- 让附加组件兼容性检查运行并在必要时更新。
- 使用Ctrl Shift Del清除缓存、历史记录等。
- 为每个Firefox版本重复此步骤。

6. Opera

Opera: 所有安装程序列表都可以在Opera.com上找到。多个版本可以并排安装，不会有任何问题。在安装过程中，选择“自定义”，并选择不同的目录。
在安装时，还要选择为所有用户使用相同的配置文件。

重要偏好设置: 设置 > 首选项 > 高级 > 安全 > 不检查更新。

注意：Opera 15+使用与Chrome相同的渲染和JavaScript引擎。

7. Chrome

Chrome: 可以从File Hippo下载独立安装程序。
也可以同时运行多个Chrome版本。

虽然可以使用Sandboxie，但建议使用下一个本地方法以便同时运行多个版本。

Download the desired version(s) from File Hippo.
Create a main directory, e.g. C:\Chrome\.
Extract the installer (=without installing), using 7-Zip for example.
After extracting, a chrome.7z archive is created. Also extract this file, and descend the created Chrome-bin directory.
Now, you see chrome.exe and a dir like 18.0.1025.45.
Move chrome.exe to 18.0.1025.45, then move this directory to C:\Chrome. The remaining files in Chrome-bin can safely be deleted.
Create a shortcut for each version:
```
"C:\Chrome\18.0.1024.45\chrome.exe" --user-data-dir="..\User Data\18" --chrome-version=18.0.1025.45
```
Explanation of this shortcut:
- "C:\Chrome\18.0.1024.45\chrome.exe" • This is the launcher
- --user-data-dir="..\User Data\18" • User profile, relative to the location of chrome.exe. You could also have used --user-data-dir="C:\Chrome\User Data\18" for the same effect. Set your preferences for the lowest Chrome version, and duplicate the User profile for each Chrome version. Older Chrome versions refuse to use User profiles from new versions.
- --chrome-version=18.0.1025.45 • Location of binaries:
  - The location (eg 18.0.1025.45) must be the name of the directory:
  - Must start and end with a number. A dot may appear in between.
  - The numbers do not necessarily have to match the real version number (though it's convenient to use real version numbers...).

关于配置：所有偏好设置均可在chrome://settings/中设置。我通常会更改主页和“高级设置”。

禁用自动更新：http://dev.chromium.org/administrators/turning-off-auto-updates

随着Chrome版本的不断发布，安装所有版本并不实际。我创建了一个VB脚本来自动化这些步骤，因此我只需存储安装程序，然后在需要测试旧版Chrome时运行该脚本：https://gist.github.com/Rob--W/2882558

8. Safari

注意：Safari已停止在Windows上的支持。 Windows上最后支持的Safari版本为5.1.7；您需要Mac或OS X虚拟机来测试新版本Safari中的网站。

Safari 本身不支持多个版本或用户配置文件并存。Safari 4 即将失效, 因此您只需测试5.* 版本。所有Safari版本都可以从Old Apps下载。

下载并安装Safari 5.0。
启动 Safari，设置您的偏好。
为每个额外的安装创建一个新的Sandboxie沙盒。
最初安装最老版本很重要，这样用户配置文件才能被新版本适应。
有关在 Sandboxie 中安装更多信息，请参见Sandboxie和Internet Explorer部分。

必须通过首选项>高级>在菜单栏中显示开发人员菜单启用开发人员工具。安装 Safari 后，通过控制面板>添加/删除软件卸载 Apple 软件更新程序。

9. 开发者工具（和快捷方式）

Internet Explorer
- IE6 / IE7: Internet Explorer Developer toolbar（Internet Explorer开发者工具栏）
- IE8 F12 Developer tools（开发者工具）^{Built-in（内置）}
- IE9+ F12 F12 Developer tools（F12开发者工具）^{Built-in（内置）}
Firefox
- 3.6+ F12 Firebug（查看addons.mozilla.org）
- 4+ Ctrl Shift K Web console（内置）^{Built-in（内置）}
- All Ctrl Shift J Error console（内置）^{Built-in（内置）}（使用Console²扩展）
Opera
- 9.5+ Ctrl Shift I Opera Dragonfly（内置）^{Built-in（内置）}
- 15+ Ctrl Shift J Chromium Developer Tools（内置）^{Built-in（内置）}
Chrome
- All Ctrl Shift J Chrome Developer Tools（内置）^{Built-in（内置）}
Safari
- 4+ Ctrl Alt C Safari Developer Tools（内置）^{Built-in（内置）}。这些工具默认情况下是禁用的。通过“偏好设置>高级>在菜单栏中显示开发者菜单”启用它。

10. 测量安装时间和磁盘空间

Setting up the base environment takes 30 minutes. Installing browsers does not require much time. Depending on the number of browsers, configuring them can take some time.

Setting up a WinXP VM with the browsers as listed in this guide + Opera 12 beta: - Size of downloads: 585MB - 12 browsers - Time used: 1:09 hour (32 minutes to get to IE) - Appliance size: 1.1G / imported size: 2.2G. - Detailed log: http://pastebin.com/R7WGPK99 Setting up a huge WinXP VM for detailed browser compatibility tests: - 24 browsers - Time used: 2:15 hours - Appliance size: 1.4G / imported size: 3.0G - Log: http://pastebin.com/SJEgxNyr

每个浏览器所需的时间（安装和配置）

Opera：2分钟
Internet Explorer：3分钟*
Safari：4分钟*
Firefox：5分钟
Chrome：6分钟

* 不包括设置Sandboxie沙箱的时间（＜1分钟）。

11. 最佳使用方法

安装完成后，请使用 CCleaner 清理垃圾，然后执行以下操作：

导出虚拟机（可以将此虚拟机保存在其他地方作为备份）。
删除新创建的虚拟机。
导入虚拟机（这些步骤可减小 VM 文件大小）。
创建快照（用作检查点）。

从现在开始，当您测试网页完成后，请关闭虚拟机并选择“还原快照”。这将使您的虚拟机保持整洁和快速。

Turn off machine > Restore snapshot

主页位于 `http://10.0.2.2:8888/`

客户操作系统可以通过 IP 地址 10.0.2.2 访问主机操作系统。运行在端口 8888 上的服务器可以通过 http://10.0.2.2:8888/ 在客户上访问，即使主机没有互联网连接。

因此，建议将 http://10.0.2.2:8888/ 设置为主页。

可能的用例：

测试单个页面。
根据暴露的用户代理（例如重定向）自动显示某个页面。
调试：在 Chrome 中创建一个 fiddle，并在 Firefox 中测试它。
共享文本和链接。

所有这些都可以轻松地在简单的服务器上实现（例如我使用过 Node.js）。

- Rob W

3

两个答案都非常有价值。非常感谢分享。 - fro_oo

@RobW，无需在强大的计算机上设置和安装虚拟机来测试IE浏览器。Remcon是免费提供的。请访问http://remote.modern.ie。 - Pacerier

有没有办法在Mac上安装Chrome？似乎不同。 - JerryFox

1

非常好而且完整的回答！不幸的是，我无法从File Hippo下载旧版Chrome。在下载页面上，它只会将我重定向到官方Google Chrome页面，强制我下载最新可用版本。我做错了什么吗？幸运的是，我有一个独立的安装程序，里面有正确的版本。 - Rodrigo V

2

我在使用7-zip提取Chrome安装程序时遇到了问题。它只会提取一个名为“~102”的文件，我不知道该怎么办。我最终通过安装Chrome并从C:\Program Files\Google\Chrome\Application中获取所需的文件来解决了这个问题。 - Rodrigo V

显示剩余2条评论

11

只是提供一下，Microsoft最近开始提供名为modern.IE的免费服务:

modern.IE是Microsoft推出的一个工程，旨在为Internet Explorer浏览器提供跨浏览器测试工具。Microsoft创建了modern.IE，以为开发人员和设计师提供一套工具来简化IE浏览器测试。

使用modern.IE，您有两种方法可以在IE中测试您的网站。首先，modern.IE向您提供基于Web的浏览器测试服务BrowserStack的三个月免费使用权。您只需拥有Facebook账户即可登录并开始测试。

modern.IE提供的第二种方法是每个浏览器的虚拟化映像，从IE 6到IE 10，可以在Windows、Mac或Linux上运行虚拟化软件，如VirtualBox、Virtual PC、Hyper-V或VMWare Player。

此外，modern.IE还提供了一项工具，可扫描您的网页以获取常见的编码问题，并将它们列出供您纠正，以便它们在所有IE版本中正确显示。

来源：modern.IE-跨浏览器IE测试工具套件

注意：链接的文章已被删除。现在的链接指向Wayback Machine页面的存档。

- Hirvesh

1

只是随便提一下 ;) saucelabs.com、browserstack.com和vanamco.com/ghostlab这些工具似乎都非常酷，可以用来在各种浏览器和平台上进行测试。 - Adriano

1

@the_archer，你的链接已经失效了。 - Pacerier

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rob W · Accepted Answer

需要测试哪些浏览器？
- 经验法则：应包含哪些浏览器？
准备工作
- Windows XP
- Windows 7+（适用于IE9+）
- 浏览器下载
  - Internet Explorer
  - Firefox
  - Opera
  - Chrome
  - Safari
  - Adobe Flash Player
- 下载总结
Sandboxie

第二部分：安装和配置
Internet Explorer
Firefox
Opera
Chrome
Safari
开发者工具（及快捷键）
每个浏览器所需的设置时间和磁盘空间
- 每个浏览器所需的时间（安装和配置）
最佳使用方法
- 主页位于http://10.0.2.2:8888/

1. 需要测试哪些浏览器？

统计数据很快就会过时。因此，我参考维基百科上的网页浏览器使用情况以及以下网站获取最新的浏览器版本信息。每个网站都附有简要的使用指南。

Can I use - 基于来自StatCounter和其他来源的数据，浏览器使用情况表。
StatCounter - 统计信息：浏览器版本 | 时间段：上个月^screenshot。
W3Counter - 查看存档报告：2012年1月（选择上个月）。^screenshot。
Wikimedia - 滚动到底部打开最新报告，SquidReportClients。
Clicky - 该网站提供单个版本的统计信息。^screenshot。

经验法则：应该包括哪些浏览器？

Firefox：最新的ESR版本+最新的稳定主要版本。^{发布说明|面向开发者|快速发布计划}
Opera：12.x+最新的稳定版本。^版本历史
自Opera 15以来，Opera使用与Chrome相同的引擎。然而，仍有很多用户在使用Opera 12（当Opera 15发布时，UX显著改变）。
Safari：5.1.7（Windows）+最新版本。^发布说明
不幸的是，苹果已停止支持Windows，因此您需要获取Mac或在虚拟机中运行OS X以在Safari中测试页面。
Chrome：最新稳定版本。^发布说明
Internet Explorer：IE8+。^功能历史
实际上这取决于您的客户端。本指南教授如何获得IE6和7，但这些浏览器已经死亡或接近死亡。IE8是Windows XP上最后支持的Internet Explorer版本，仍有很多人在使用。

备注

现在，大多数网页浏览器都采用自动更新的快速发布形式。当本指南编写时，发布不是很频繁，因此设置一组浏览器而无需回头查看是有用的。
除非您有意在旧浏览器中测试应用程序，否则只需获取浏览器的最新版本，并让自动更新程序负责管理版本。

如果您不需要太多的灵活性，并且想要快速测试页面，则建议您查看BrowserStack.com。注册后，您可以获得30分钟的免费试用，直接在浏览器中访问许多桌面和移动浏览器。

2. 准备工作

在设置机器之前，请下载所有必要的文件（请参见本节末尾的“下载摘要”）。所有文件将通过共享文件夹与虚拟机共享^{什么？如何？}。

虚拟化软件 (推荐使用VirtualBox，即使是商业用途也可以免费使用。以下说明是以VirtualBox为例编写的。)
Windows XP
- 从modern.IE网站下载IE6 XP镜像文件。解压缩.ova文件并运行它，将其导入到VirtualBox中。(还有其他虚拟化产品的镜像文件，例如VMware、Parallels、Virtual PC和Hyper-V。)
  - IE6 XP image for VirtualBox on Windows ^{大约为764MB}
  - IE6 XP image for VirtualBox on Mac ^{大约为717MB}
  - IE6 XP image for VirtualBox on Linux ^{大约为771MB}
- 准备镜像文件：
  - VirtualBox设置：启用网络适配器，但不要连接虚拟机到真实网络中。
  - VirtualBox设置：创建只读共享文件夹。此文件夹将用于在主操作系统和客户操作系统之间传输数据。
  - 运行net use x: \\vboxsvr\WinShared(假设共享文件夹名为WinShared，这将把网络目录绑定到x:驱动器)。
  - 可选：安装AntiWPA以禁用激活检查，如果您将使用该镜像超过30天。
  - 可选：禁用分页文件(计算机 > 属性 > 高级系统设置 > 性能 > 高级 > 虚拟内存 > 更改 > 无分页文件 > 设置[确认])。
  - 可选：通过开始 > 运行 > services.msc禁用unnecessary services。
    按列Startup Type排序，并根据图像将所有"自动"服务切换到"手动"。每当要安装MSI包时，运行net start msiServer("Windows Installer")：
  - 可选：Disable Desktop clean-up wizard：桌面 > 属性 > 桌面 > 自定义桌面 > 禁用"桌面清理向导，每60天一次"
  - 可选：安装并配置Sandboxie(用于在IE6虚拟机中运行IE7和IE8)
  - 可选：安装CCleaner，运行它来配置和清除垃圾文件。
  - 可选：安装7-Zip(用于多个Chrome)
  - 通过客户操作系统(WinXP)关闭系统。
  - VirtualBox设置：将虚拟机连接到真实网络
    (只有在安装期间需要Internet Explorer时才需要互联网)
  - 可选：为您的虚拟机创建一个快照，以便在下一步出错时可以还原。
Windows 7+ (for IE9+)
- 从modern.IE网站下载预构建的虚拟机镜像。
  这些镜像是计时的，它们在第一次使用后30天后过期。当镜像过期时，在使用1小时后关闭。如果您不想每次重新创建镜像，请在激活镜像之前更改虚拟机的硬件时钟。
  例如，在VirtualBox中，您可以使用VBoxManage modifyvm NAME_OF_VM --biossystemtimeoffset +3600000000将时间设置为未来1000小时(如果要将其设置为过去某个时间点，则使用减号)。
浏览器下载
- Internet Explorer:
  - 如果您想在单台计算机上使用IE 6-8，推荐的方法是：
    - 需要Sandboxie(我建议paying购买完整版本，或者look on YouTube)。
    - IE6 - 预安装在XP虚拟机中
    - IE7和IE8 完整离线安装程序
    - Internet Explorer Developer toolbar (release information) (适用于IE6+7)
  - IE9+ - 从modern.IE中使用预构建的映像。
- Firefox:
  - Profile Manager ^{以轻松管理多个配置文件}
  - 从Mozilla.org下载最新版本。
  - 从ftp.mozilla.org下载旧版本(如果只对最近的旧版本感兴趣，请参见releases.mozilla.org)。
  - 或者，使用Utilu Mozilla Firefox Collection。
- Opera:
  - 从Opera.com下载任何Opera版本。
- Chrome:
  - 下载7-zip以提取Chrome安装程序。
  - 在FileHippo.com下载特定版本。请确保选择"FileHippo"镜像以获取存档版本。否则，您将被重定向到Google服务器上的最新版本。
- Safari:
  - 从Apple.com下载最新版本。
  - 从Oldapps.com下载其他版本。
- Adobe Flash Player
  - 如果flash必须在IE6中工作，请下载version 10.3^{3 MB}。否则，下载the latest version。
  - 下载最新插件for other browsers。

下载总结

为了方便起见，最好将所有安装文件放在共享文件夹中。以下是所有必要文件的简要（完整）列表（按步骤排序）：

IE6 XP虚拟机镜像（适用于Windows）^约764MB
IE6 XP虚拟机镜像（适用于Mac）^约717MB
IE6 XP虚拟机镜像（适用于Linux）^约771MB
AntiWPA^{24 KB；假阳性；md5：e5a14c47e9c26e78fccb22ee71fedd51}，CCleaner^{3.5 MB}，Sandboxie^{2.3 MB}
浏览器（Firefox + 配置文件管理器，Opera，Chrome，Safari）
IE7和IE8的安装程序可从此处下载：IE7，IE8
7-zip^{1.1 MB}用于提取Chrome的安装程序。
ActiveX 10.3适用于IE6+，最新插件版本适用于其他浏览器。
IE开发人员工具栏适用于IE6和7^{626 KB}

3. Sandboxie

Sandboxie是一个轻量级工具，可以在沙盒中运行应用程序。它还可用于在单个Windows机器上安装多个版本的IE / Safari。

下载: http://sandboxie.com/index.php?DownloadSandboxie
补丁: 扩展版必须才能同时启用多个沙盒。支付或者访问YouTube。
同时运行多个IE/Safari版本需要使用扩展版。如果您不介意一次测试一个IE/Safari版本，则标准版就足够了。

安装后:
禁用提示: "配置 > 提示 > 隐藏所有提示"
默认情况下，沙盒应用程序周围会出现黄色边框。如果您不喜欢这个，请前往基础配置："沙盒 > 默认沙箱 > 沙箱设置 > 外观"。

对于每个新的IE/Safari版本，您需要按照以下步骤进行：
创建: "沙盒 > 创建新沙盒" - 输入名称，例如“IE8”，并确认。
安装: "IE8 > 在沙盒中运行 > 运行任何程序"
选择所需的安装程序，然后按OK。
快捷方式: 安装完成后，请使用"IE8 > 浏览内容"，找到二进制文件并创建一个桌面快捷方式。

所有沙盒文件/注册表更改都保存在C:\Sandbox中。此目录中的应用程序默认在沙盒中启动。其他程序可以通过上下文菜单轻松地在沙箱中启动："运行沙箱"或"发送到>Sandboxie>IE8"。

使用CCleaner清理：在主环境中运行CCleaner，然后在各个沙盒中运行。

导航至：第2部分。

跨浏览器测试：在一台机器上测试所有主流浏览器

目录

1. 需要测试哪些浏览器？

经验法则：应该包括哪些浏览器？

备注

2. 准备工作

下载总结

3. Sandboxie

安装和配置

4. Internet Explorer

5. 火狐浏览器

6. Opera

7. Chrome

8. Safari

9. 开发者工具（和快捷方式）

10. 测量安装时间和磁盘空间

每个浏览器所需的时间（安装和配置）

11. 最佳使用方法

主页位于 http://10.0.2.2:8888/

主页位于 `http://10.0.2.2:8888/`