如何在浏览器中测试JavaScript代码

译者 | 陈峻

审校 | 孙淑娟

通常，测试JavaScript的过程对于新手测试人员来说，可能会比较痛苦。对此，业界已经开发出了许多现成的工具、技术和框架，尽量让该过程变得轻松一些。其中，诸如：Mocha、Jasmine和Jest之类的工具，提供了测试结构，而Istanbul和Blanket之类的工具则能够生成代码覆盖率的相关报告。可以说，在浏览器中，使用不同的方法去测试JavaScript代码，往往会产生满足不同需求目标的结果。我们很难仅靠一种工具、技术或解决方案，达到放之四海皆准的效果。本文将向您介绍如何在浏览器中测试JavaScript代码的6种流行测试方法，它们分别是：

• JSFiddle
• JSBin
• CodePen
• 跨浏览器测试工具
• Karam + Jasmine + Google Chrome
• Liveweave

下面，让我们逐渐进行讨论：

1.JSFiddle 

无论您是使用JavaScript，还是使用React或Vue等框架，JSFiddle都是一款可以在浏览器中编写和测试JavaScript代码的在线工具。2009年，它是以“Mooshell”的形式被推出的。如果您正在开发Web应用程序，并用到了某种类型的JavaScript库，那么JSFiddle便是一款比较合适的测试工具。它的界面非常简单，您只需要输入一些JavaScript脚本，甚至添加一些HTML和CSS，即可立即查看到结果。因此，您可以在将JavaScript代码片段添加到自己的项目之前，使用JSFiddle进行全面测试。

2.JSBin 

JSBin是JSFiddle的简洁纯净版的替代产品。如果您想使用一个更易于理解、且界面更加简洁的工具，那么JSBin会比JSFiddle更适合您。由于该平台提供免费和专业访问权限，因此只要您成为专业（pro）用户，就能够享受其针对私人垃圾箱、以及无限制的dropbox同步等高级功能。当然，您也可以使用JSBin的通用访问权限，去轻松地测试HTML、CSS和JavaScript的任何组合。

3.CodePen 

CodePen是一种能够测试HTML、CSS和JavaScript代码的最佳在线工具。其开发者社区拥有丰富的资源。目前，它作为一个开源学习环境，不但拥有高达330000名已注册的开发者用户，而且正致力于开发满足各类应用需求的前端应用程序。可以说，它是构建和部署网站，并向全网推广您的产品，以及构建测试用例的最佳平台之一。

4.跨浏览器测试工具 

虽然您可以轻松地使用JSFiddle和CodePen等工具，来测试您的JavaScript代码，但这些工具不会向您展示目标代码在不同浏览器或移动浏览器中的不同输出方式。如果您想测试代码的跨浏览器兼容性，那么您需要使用诸如LambdaTest之类，能够横跨多种浏览器的在线测试工具。目前，跨浏览器测试工具支持实时的交互式浏览器测试、自动屏幕截图测试、响应式布局测试、以及智能可视化UI测试等。该工具能够大幅加快您的测试周期，并协助您解决代码中的特定浏览器问题。

5.Karam + Jasmine + Google Chrome 

Karma是一种能够让您根据多种实现意图，在浏览器中测试JavaScript代码的工具。不过，它无法单独测试代码的本身，而需要依赖诸如Jasmine和Mocha等第三方库，去执行代码，以开展测试。此外，它在交付形式上还需要一个真正的浏览器。也就是说，您必须在本地计算机上安装Google Chrome，才能使用这种JavaScript测试方法。当然，它是以无头模式(headless mode)，来启动Google Chrome，以执行各项操作。

6.Liveweave 

作为另一种可用于测试JavaScript代码的在线工具，Liveweave具有实时的预览功能，并配备了参考标准来帮助您进行响应式设计。它的HTML、CSS和JavaScript代码提示功能，会使得初学者可以轻松地输入基本代码。此外，您也可以使用Liveweave将被测项目下载成为一个.zip文件，以便在代码中轻松地添加和使用包括jQuery、AngularJS、以及Bootstrap在内的外部库。

7.小结 

除了上述介绍的6种可以在浏览器中测试JavaScript代码的流行方式，您还可以使用CSSDeck和Dabblet等工具。它们同样便捷且易用。当然，Firebug和Chrome等由大厂提供的开发者工具，通常还会提供Javascript控制台，以方便您直接输入JavaScript代码，并执行之。它们不但可以适合原生的浏览器，还适用于Internet Explorer 8以上、Opera、Safari、以及各种新出现的浏览器。

原文链接：https://dzone.com/articles/how-to-test-javascript-code-in-a-browser

译者介绍

陈峻 （Julian Chen），51CTO社区编辑，具有十多年的IT项目实施经验，善于对内外部资源与风险实施管控，专注传播网络与信息安全知识与经验；持续以博文、专题和译文等形式，分享前沿技术与新知；经常以线上、线下等方式，开展信息安全类培训与授课。