于一些前端的樣式和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技術棧