译者:陈军
通常,测试Javascript的过程对于新手测试者来说是痛苦的。在这方面,业界已经开发了许多现成的工具、技术和框架来尽可能简化这一过程。其中Mocha、Jasmine、Jest等工具提供测试结构,伊斯坦布尔、Blanket等工具可以生成代码覆盖率的相关报告。可以说,在浏览器中,使用不同的方法测试Javascript代码,往往会产生满足不同需求的结果。

我们很难只用一种工具、一种技术、一种解决方案就达到一种普适的效果。本文将向您介绍如何在浏览器中测试Javascript代码的6种流行测试方法。它们是:
JSFiddle
JSBin
密码笔
跨浏览器测试工具
卡拉姆+茉莉+谷歌浏览器
活织
现在,我们来逐步讨论一下:
1.JSFiddle

无论你使用的是Javascript还是React或Vue等框架,JSFiddle都是一个在线工具,可以在你的浏览器中编写和测试Javascript代码。2009年以“Mooshell”的形式上线。如果您正在开发一个Web应用程序并使用某种类型的Javascript库,那么JSFiddle是一个合适的测试工具。它的界面非常简单。你只需要输入一些Javascript脚本,甚至添加一些HTML和CSS就能立刻看到结果。因此,在将Javascript代码片段添加到您自己的项目之前,您可以使用JSFiddle进行全面的测试。
2.JSBin
JSBin是简洁纯粹的JSFiddle版本的替代品。如果你想用一个更容易理解,界面更简单的工具,那么JSBin会比JSFiddle更适合你。由于平台提供免费专业接入,只要成为专业用户,就可以享受其私人垃圾桶、无限dropbox同步等高级功能。当然,你也可以利用JSBin的通用访问权限,轻松测试HTML、CSS和Javascript的任意组合。
3.密码笔
CodePen是最好的在线工具,可以测试HTML、CSS和Javascript代码。其开发者社区资源丰富。目前,作为一个开源的学习环境,它不仅拥有多达33万的注册开发者用户,还致力于开发满足各种应用需求的前端应用。可以说是建设和部署网站,向全网推广你的产品,构建测试用例的最佳平台之一。
4.跨浏览器测试工具
虽然你可以很容易地使用JSFiddle和CodePen等工具来测试你的Javascript代码,但这些工具不会向你展示目标代码在不同浏览器或移动浏览器中的不同输出方式。如果你想测试你的代码的跨浏览器兼容性,那么你需要使用LambdaTest这样的在线测试工具,它可以跨越多个浏览器。目前跨浏览器测试工具支持实时交互浏览器测试、自动截屏测试、响应式布局测试、智能可视化UI测试。这个工具可以大大加快您的测试周期,并帮助您解决代码中特定的浏览器问题。
5.卡拉姆+茉莉+谷歌浏览器

Karma是一个工具,允许您根据不同的实现意图在浏览器中测试Javascript代码。但它不能单独测试代码本身,需要依靠Jasmine、Mocha等第三方库来执行代码进行测试。此外,它还需要一个真正的交付形式的浏览器。也就是说,您必须在本地计算机上安装Google Chrome,才能使用这种Javascript测试方法。当然,它以无头模式启动谷歌Chrome来执行各种操作。
6.活织
作为另一个可以用来测试Javascript代码的在线工具,Liveweave具有实时预览功能,并配备了参考标准来帮助您进行响应式设计。它的HTML、CSS和Javascript代码提示功能会让初学者很容易输入基本代码。此外,您还可以使用Liveweave将经过测试的项目下载到一个. zip文件中,这样您就可以轻松地在代码中添加和使用外部库,包括jQuery、AngularJS和Bootstrap。
7.摘要
除了上述6种在浏览器中测试Javascript代码的流行方法,你还可以使用CSSDeck和Dabblet等工具。它们也很方便,易于使用。当然,大厂商提供的Firebug、Chrome等开发者工具,通常都会提供Javascript控制台,让你直接输入Javascript代码并执行。它们不仅适用于原生浏览器,还适用于Internet Explorer 8及以上版本、Opera、Safari和各种新浏览器。


