Modern.IE 和 BrowserStack：我们十年前就应该拥有的工具。

引言

我确实正在走向一个脾气暴躁的老头子的行列——至少在 Web 开发领域是这样。我在 Mosaic 出现时就开始了我的 Web 开发生涯，并且我懂得让 Netscape 乖乖听话的所有技巧。我甚至对 IE4 的出现感到兴奋，并广泛而强烈地预测，一个更简单、更合理的 HTML 和 CSS 跨浏览器标准的新时代已经到来。一个开发者和浏览器和谐共处、在草地上载歌载舞、为 .htc 文件而陶醉的水瓶座时代。

当我看向窗外阴沉的暴风雨云，雨点倾泻在我的 Windows 上，远处闪烁着闪电，您会原谅我一声回首的愤世嫉俗的冷笑。

如今开发网页意味着您需要针对数十种浏览器、设备和配置进行测试——这还不包括确保像广告拦截器或 JavaScript 拦截器之类的东西不会毁了您的一天。桌面、平板电脑、移动设备、IE6+、Firefox 23 和 Chrome Eleventy-one^th（或者本周的最新版本）都很受欢迎。至少 WAP 还有点自知之明，躲在棚子后面，结束了这凡人的生命。

测试您的 HTML 和 CSS

那么，面对如此多的选择，您该怎么办？有几种选择

1. 让别人为您测试。让我知道您的体验如何。
2. 根本不测试。同样，让我知道您的体验如何。
3. 以狂热者的确定性声明，任何无法正确呈现您网站的浏览器都是一种应被回避的异常现象，并且您挑剔的读者绝不会使用它。请记住，解决问题的第一步是承认您一开始就存在问题。
4. 使用最基本、最可靠的标签和布局编写您的 HTML，以确保在所有浏览器上都能正常工作。这实际上有点两难，因为为了避免测试而只使用在所有设置上都能完美工作的标签，您需要测试以确保它们确实能在所有设置上完美工作。
5. 手动测试所有浏览器。然后过一种黑暗、愤世嫉俗的生活。
6. 针对您知道 98% 的用户会使用的设置进行测试，而忽略其余部分。如果有人要使用 Lynx 查看您的网站，然后抱怨图片无法显示，那么您永远不会成功。

针对 98% 的设置进行测试是我个人的建议，但也附带一个警告：让您的用户能够轻松报告您测试过的浏览器出现的问题，并偶尔针对 不在 您的 前 10 名列表 中的浏览器测试您大部分的功能。您不必一直对每个人都完美。只要确保您至少是可用的。

多浏览器

CodeProject 的典型浏览器范围将是 IE、Chrome、Firefox、Safari 和 Opera，以及它们的移动版本。加上它们的各种版本。IE 的使用率低于 1% 的 IE7 及更早版本，但这仍然包括 IE8、9 和 10。Firefox 的版本从 5 到 23，而 Chrome 则失控了：仅 Chrome 的前 10 个版本就显示了版本 26 的 5 个次要版本。这是很大的变化，但幸运的是，浏览器实际上正在稳定下来（尽管有时，例如 Firefox 17，会出现渲染问题）。

基于此，我们（简化的）测试方案如下：

IE	7-10	Windows
Firefox:	最新	Windows 和 Mac
Chrome:	最新	Windows、Mac 和 Android
Safari:	最新	Windows、Mac 和 iOS

以及针对非 IE 浏览器早期版本的次要测试集。

请注意这里的一个大问题：我们只针对最流行浏览器的最新版本进行测试，因为它们（理智地）都会主动更新自己。IE 终于开始这样做，并且还（通过 F12 开发人员工具）提供了出色的支持来测试旧版本。对于其他浏览器，您需要安装多个版本或使用虚拟机。对于在不同操作系统上进行测试，您需要第二台计算机、设备、虚拟机或模拟器。

一个重要的注意事项是，虽然 Chrome 和 Safari 曾经使用相同的 WebKit 渲染引擎，但 Google 宣布他们将分离 WebKit 以创建 Blink。过去，在 Safari 或 Chrome 上进行测试通常足以同时测试两者，但将来这不再是可靠的选择。

多浏览器测试选项

多年来，我曾使用过 4 种解决方案来测试多个浏览器（除了简单地安装所有浏览器之外）。

1. Spoon.net。这作为一个浏览器插件，提供了对大量不同浏览器和应用程序的访问，这些浏览器和应用程序按需在沙盒中运行。IE 的支持在一段时间内已停止，所以我转而使用...
2. DebaugBar 的 IETester。这个单独的安装允许您在标签式环境中运行从 5.5 到 10 的所有 IE 版本。有点不准确，调试脚本和 HTML 并不总是成功，但至少您可以测试 IE。
3. 设备特定的模拟器或工具，如 MacOS 上的 Safari Web Inspector。
4. Modern.IE。这是我的新好朋友。

正确进行多浏览器 HTML 测试

忽略我关于我们生活在黑暗时代的首段话，现在进行浏览器测试实际上比以前容易得多，因为浏览器都在朝着 HTML5 兼容性努力，并且随着现代浏览器自动更新，我们越来越不可能遇到还在使用过时、渲染效果差且不安全的浏览器的用户。我对编写 HTML 的建议是，从一开始就以 HTML5 为目标，并使用 CSS3（可能还有 polyfills）来实现花哨的功能。保持您的 HTML 清洁，避免 hack。我将在这次讨论中忽略 JavaScript，因为那是一个会引起牙齿疼痛的完全不同的主题，它会严重损害我的血压。只使用 jQuery 并祈祷。

以 HTML5 为目标将比使用 IE 条件注释等方法更好地为您的标记实现未来兼容性。开发者社区正在积极推动开发者，并因此推动用户坚持使用现代浏览器，所以 HTML5 将很快成为您 95%-98% 的用户基础。如果您确实需要 hack 来修复问题，请**负责任地**使用 CSS hacks。确定问题是否仅仅是糟糕的 CSS，尝试寻找一个非 hack 的解决方法，但如果您最终遇到一个使用 IE4 且无法退出的客户，那么一个标记良好、文档齐全、集中的 CSS hack 可以避免您在 HTML 中做一些危险的事情。

所以这意味着，作为我们的主要目标，我们只需要进行测试：

IE	最新	Windows
Firefox:	最新	Windows 和 Mac
Chrome:	最新	Windows、Mac 和 Android
Safari:	最新	Windows、Mac 和 iOS

以及针对 IE 8/9 和其他浏览器早期版本的次要测试。简单得多。除了操作系统和平台之外。

测试前检查

在测试页面之前，您需要**检查**您的页面。如果您一开始就使用可疑的 HTML，那么在多个浏览器上进行多次迭代修复 HTML 是没有意义的。请输入 Modern.IE。

在 Modern.IE 上，您只需输入您希望检查的网站的 URL，它就会运行一系列检查，以确保您正在针对标准，并检查常见的兼容性问题。其目标是“建议使用 HTML5 和 CSS3 等 Web 标准（或优雅的后备方案）进行修复或增强”。

那么，让我们试试一个网站，比如 Microsoft.com。输入 URL，点击扫描，您很快就能得到一个整洁的摘要和问题的建议。它立即建议了一种将新浏览器的网站渲染性能提高 30% 的方法，并提供了一个链接，指导您如何实现这一目标。

到目前为止一切顺利。我们已经扫描了页面，实现了（或者，根据情况，完全忽略了）建议，并且已经有了我们的网站。现在，去测试！

在同一窗口中跨多种设备、跨多个平台测试多个浏览器。

我真的需要 Shamwow 的那个家伙 来做这件事。它真的那么好。

在 Modern.IE 主页上，您会在品味十足的橙色区域下看到一个蓝色的“尝试 BrowserStack”链接。试试吧。体验它。爱上它。（不过您需要 Flash。）

选择您的平台、操作系统甚至设备，然后输入 URL，您就可以开始了。

但等等！还有更多！

显然，在生产环境中进行测试是痛苦的，因为您的周期将涉及每次更新之间的部署。这可能会很痛苦。为了解决这个问题，BrowserStack 连接到您的本地服务器以进行完整的本地测试。在一个设备上针对生产环境测试，在另一个设备上针对本地测试。

最后的几句话

我应该指出两点：

1. Modern.IE 的扫描器可以被 下载 并在本地运行。
2. BrowserStack 不是免费的。您有 3 个月的免费试用期，之后单人开发者许可证是每月 19 美元。相比之下，Spoon.net 的基本应用程序是免费的，所有应用程序是每月 12 美元。然而，spoon.net 不支持在特定操作系统或设备上进行测试。

浏览器测试实际上取决于您的应用程序和受众的具体情况。如果您绝对、肯定地要求您的应用程序只能在 IE6 上运行，因为您的公司坚持使用 XP 且永远不会在一百万年内升级，那么为您的内部内联网应用程序进行多浏览器测试可能不是一个有效的时间利用。另一个考虑是，我 98% 的经验法则可能完全不适合您。您 99.9% 的用户可能是完美的网络公民，使用最新版本的 IE10 或 Firefox，一切都很棒，但您的 CEO 是盲人，使用屏幕阅读器。您确实需要针对这一点进行测试。

此外，浏览器测试不能替代用户测试、安全测试、可访问性测试或其他您需要进行的测试。它是均衡测试方案的一部分。

要务实，按照标准进行编码，避免 hack，并致力于为几乎所有人提供一些精彩的东西，并为那些顽固或受压迫的少数群体提供可容忍的东西。

祝你好运。