在浏览器测试JavaScript的方法

在浏览器测试JavaScript的方法

JSFiddle
Cross Browser Testing Tool
Karam + Jasmine + Google Chrome
CodePen
JSBin
Liveweave

     测试JavaScript是一件很痛苦的事情。很多工具、技术和框架已经被开发出来，以使这个过程尽可能的不痛苦。其中一些工具如Mocha、Jasmine和Jest提供了一个测试结构，而其他一些工具如Istanbul和Blanket也会生成代码覆盖报告。在浏览器中测试JavaScript代码的不同方法有不同的前景和后果。很难将范围缩小到一个工具或技术上，来解决所有的问题!

让我们快速了解一下在浏览器中测试JavaScript代码的一些最流行的方法:

1. JSFiddle
    无论你是使用JavaScript还是React和Vue等框架，JSFiddle都是适合你的工具。它是一个在线工具，可以在浏览器中编写和测试JavaScript代码。它在2009年作为 "Mooshell "推出。如果你正在开发一个网络应用程序并使用任何类型的JavaScript库，那么JSFiddle是值得一看的东西。它的界面非常简单，你只需要输入一些JavaScript，甚至添加一些HTML和CSS，就可以立即看到结果。在使用JSFiddle将你的JavaScript代码片段添加到你的项目中之前，先对它们进行测试!

2. 跨浏览器测试工具
    尽管你可以很容易地使用JSFiddle和CodePen等工具来测试你的JavaScript代码，但这些工具不会显示你的代码在不同浏览器或移动浏览器中的输出情况。如果你想测试你的代码的跨浏览器兼容性，你需要使用LambdaTest这样的在线跨浏览器测试工具。它可以实现实时互动的浏览器测试，自动截图测试，响应式布局测试，以及智能视觉UI测试。该工具将大大加快你的测试周期，并帮助你解决代码中的特定浏览器问题。

3. Karma + Jasmine + Google Chrome
    Karma是一个让你在浏览器中测试JavaScript代码的工具，有很多测试目的。然而，它并不测试代码本身。它执行代码，但依靠第三方库如Jasmine和Mocha进行测试。除此以外，它还需要一个真正的浏览器。因此，谷歌浏览器必须安装在你的本地机器上，这种方法的JavaScript才能发挥作用。它在无头模式下启动谷歌浏览器进行操作。

4. CodePen
     CodePen是最好的在线工具之一，可以在线测试你的HTML、CSS和JavaScript代码。这个开发者社区有很多东西要教! 这个开源的学习环境可能有可能是最大的开发者社区，有高达33万的注册用户在不断努力开发惊人的前端应用程序。它是建立和部署网站、向世界展示你的工作和建立测试案例的最佳平台之一。

5. JSBin
     JSBin是JSFiddle的一个整洁的替代品。如果你想要一个更容易理解和不那么杂乱的界面，那么JSBin就是你要的工具。该平台有一个免费和一个专业的访问权限。对于像私有仓和无限制的Dropbox同步这样的高级功能，你需要使用专业版，然而，你可以使用JSBin的一般访问权限轻松地测试HTML、CSS和JavaScript的任何组合。

6. Liveweave
     Liveweave是另一个编码游乐场，你可以在那里测试你的JavaScript代码。它具有实时预览功能，并配备了一个标尺来帮助你进行响应式设计。它的HTML、CSS和JavaScript的代码提示功能使初学者很容易输入代码。除此之外，你可以使用Liveweave将你的项目下载为一个.zip文件，还可以在你的代码中很容易地添加和使用外部库，如jQuery、AngularJS、Bootstrap等。

    这些是在浏览器中测试你的JavaScript代码的一些最流行的方法。除此以外，你甚至还可以使用CSSDeck和Dabblet这样的工具。这些都是同样好的，而且很容易使用。除此之外，Firebug和Chrome开发者工具都有Javascript控制台，你可以在那里输入JavaScript代码进行执行。这同样适用于Internet Explorer 8+、Opera、Safari和可能的许多其他现代浏览器。

---

今天先到这儿，希望对云原生，技术领导力， 企业管理，系统架构设计与评估，团队管理, 项目管理, 产品管管，团队建设 有参考作用 , 您可能感兴趣的文章:
领导人怎样带领好团队
构建创业公司突击小团队
国际化环境下系统架构演化
微服务架构设计
视频直播平台的系统架构演化
微服务与Docker介绍
Docker与CI持续集成/CD
互联网电商购物车架构演变案例
互联网业务场景下消息队列架构
互联网高效研发团队管理演进之一
消息系统架构设计演进
互联网电商搜索架构演化之一
企业信息化与软件工程的迷思
企业项目化管理介绍
软件项目成功之要素
人际沟通风格介绍一
精益IT组织与分享式领导
学习型组织与企业
企业创新文化与等级观念
组织目标与个人目标
初创公司人才招聘与管理
人才公司环境与企业文化
企业文化、团队文化与知识共享
高效能的团队建设
项目管理沟通计划
构建高效的研发与自动化运维
某大型电商云平台实践
互联网数据库架构设计思路
IT基础架构规划方案一(网络系统规划)
餐饮行业解决方案之客户分析流程
餐饮行业解决方案之采购战略制定与实施流程
餐饮行业解决方案之业务设计流程
供应链需求调研CheckList
企业应用之性能实时度量系统演变

如有想了解更多软件设计与架构, 系统IT,企业信息化, 团队管理 资讯，请关注我的微信订阅号：

作者：Petter Liu
出处：http://www.cnblogs.com/wintersun/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 该文章也同时发布在我的独立博客中-Petter Liu Blog。