于一些前端的样式和js效果，我们非常希望可以将这些代码片段保存起来，然后分享给那些想要使用这些样式特效的人，庆幸的是，网络上已经有很多这样的网站了，今天我们就来盘点一下这些非常好用的网站。

jsfiddle

诞生比较早的一个代码片段网站，它集成了主流的js框架，你可以轻松地在需要使用的时候引入它们，同时它也支持引入外部css链接，通过将html，css,js代码片段分离，让用户有了非常清楚的代码结构，非常方便代码地调试。

它支持登录功能，登录以后，你可以将自己的代码片段进行保存和分享。

JSRUN

一个支持多种编程语言的代码运行网站，你可以保存自己的代码，你可以运行各个常用的编程语言代码，缺点是有时候需要输入验证码，有些功能需要升级vip才能使用。

codepen

和jsfiddle很类似，也是专业的网页编辑器，可以引入js,css,对于html,js,css分为三个窗口进行管理，登录之后可以保存代码片段和分享代码片段。即使不登录，也可以使用它进行临时的代码编辑和测试。

jsbin

也是一款在线代码编辑网站，也是可以编辑html和css，js代码片段，可以引入第三方库，可以引入第三方css，可以查看控制台的输出。

它可以保存截图，可以生成模板，同样也支持代码打包下载。

cssdeck

它提供了很多优秀的代码案例，如果你没有思路或者仅仅只是想欣赏下他人的优秀代码，你可以来这里找到你想要的，类似于jsfiddle,它也是支持html，js，css代码编辑的，它的展示页面看起来很大，非常方便查看。

它的html支持markdown和slime进行处理，它的js支持coffeescript,它的css支持sass,scss,less等。

dabblet

它主要支持的是css代码块的测试，它目前不支持js，它的代码编辑块字体可以非常方便地进行调整。

总结

网上有很多类似的代码编辑网站，如果你感兴趣的话，你也可以去github上查看Plunker等项目开源代码进行分析研究，自行搭建属于自己的代码片段编辑网站。

载地址HTMLTestRunner.py文件：

http://tungwaiyip.info/software/HTMLTestRunner.html

下载的适合python2，如果python3要修改一些内容

首先吧HTMLTestRunner文件添加到环境变量里，可以直接放到python的Lib目录下

HTMLTestRunner是python标准库unittest单元测试框架的一个扩展，用于生成HTML测试报告

生成HTML测试报告

#coding:utf-8
import unittest, HTMLTestRunner

class Testcase(unittest.TestCase): # 测试用例类
# 具体的测试用例，一定要以test开头
def test1(self):
self.assertEqual(1, 1)

def test2(self):
self.assertEqual(2, 2)

if __name__ == "__main__":
# 构造测试集
suite = unittest.TestSuite()
suite.addTest(unittest.makeSuite(Testcase)) # 执行该测试类所有用例

# 定义报告的存放路径，以二进制写的形式打开文件
f = open('test.html', 'wb')

# 定义测试报告，stream：报告存放路径，title：报告标题，description：描述
runner = HTMLTestRunner.HTMLTestRunner(stream=f, title=u'测试用例标题', description=u'描述')
runner.run(suite) # 运行测试用例
f.close() # 关闭文件

返回结果（测试报告详情）：

--stream ：存放报告写入文件的存入区域

--title ：测试报告的主题

--description ：测试报告的描述

报告用例类和用例方法加备注

为了生成带有中文描述的测试用例类和测试用例

在用例类和用例方法下，通过’’’ ‘’’或””” “””来添加备注

#coding:utf-8
import unittest, HTMLTestRunner

class Testcase(unittest.TestCase): # 测试用例类
u'''类名后加备注'''

def test1(self):
u'''用例后面加备注1'''
self.assertEqual(1, 1)

def test2(self):
u'''用例后面加备注2'''
self.assertEqual(2, 2)

if __name__ == "__main__":
# 构造测试集
suite = unittest.TestSuite()
suite.addTest(unittest.makeSuite(Testcase))

# 定义报告的存放路径，以二进制写的形式打开文件
f = open('test.html', 'wb')

# 定义测试报告，stream：报告存放路径，title：报告标题，description：描述
runner = HTMLTestRunner.HTMLTestRunner(stream=f, title=u'测试用例标题', description=u'描述')
runner.run(suite) # 运行测试用例
f.close() # 关闭文件

返回结果：

测试报告文件名

#coding:utf-8
import unittest, HTMLTestRunner, time
from unittest.loader import makeSuite

class Testcase(unittest.TestCase): # 测试用例类
# 具体的测试用例，一定要以test开头
def test1(self):
self.assertEqual(1, 1)

def test2(self):
self.assertEqual(2, 2)

if __name__ == "__main__":
# 构造测试集
suite = unittest.TestSuite()
suite.addTest(makeSuite(Testcase)) # 执行该测试类所有用例

# 定义报告的存放路径，以二进制写的形式打开文件
now = time.strftime("%y-%m-%d %H_%M_%S")
f = open('./' + now + 'test.html', 'wb')

# 定义测试报告，stream：报告存放路径，title：报告标题，description：描述
runner = HTMLTestRunner.HTMLTestRunner(stream=f, title=u'测试用例标题', description=u'描述')
runner.run(suite) # 运行测试用例
f.close() # 关闭文件

返回结果：

测试报告乱码问题

将红框里的内容注释掉改成uo = o.decode('utf-8')

者 | 陈峻

审校 | 孙淑娟

通常，测试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项目实施经验，善于对内外部资源与风险实施管控，专注传播网络与信息安全知识与经验；持续以博文、专题和译文等形式，分享前沿技术与新知；经常以线上、线下等方式，开展信息安全类培训与授课。

来源： 51CTO技术栈