譯者 | 陳峻
審校 | 孫淑娟
通常，測試JavaScript的過程對于新手測試人員來說，可能會比較痛苦。對此，業(yè)界已經(jīng)開發(fā)出了許多現(xiàn)成的工具、技術(shù)和框架，盡量讓該過程變得輕松一些。其中，諸如：Mocha、Jasmine和Jest之類的工具，提供了測試結(jié)構(gòu)，而Istanbul和Blanket之類的工具則能夠生成代碼覆蓋率的相關(guān)報告。可以說，在瀏覽器中，使用不同的方法去測試JavaScript代碼，往往會產(chǎn)生滿足不同需求目標(biāo)的結(jié)果。我們很難僅靠一種工具、技術(shù)或解決方案，達(dá)到放之四海皆準(zhǔn)的效果。本文將向您介紹如何在瀏覽器中測試JavaScript代碼的6種流行測試方法，它們分別是：
- JSFiddle
- JSBin
- CodePen
- 跨瀏覽器測試工具
- Karam + Jasmine + Google Chrome
- Liveweave
下面，讓我們逐漸進(jìn)行討論：
1.JSFiddle
無論您是使用JavaScript，還是使用React或Vue等框架，JSFiddle都是一款可以在瀏覽器中編寫和測試JavaScript代碼的在線工具。2009年，它是以“Mooshell”的形式被推出的。如果您正在開發(fā)Web應(yīng)用程序，并用到了某種類型的JavaScript庫，那么JSFiddle便是一款比較合適的測試工具。它的界面非常簡單，您只需要輸入一些JavaScript腳本，甚至添加一些HTML和CSS，即可立即查看到結(jié)果。因此，您可以在將JavaScript代碼片段添加到自己的項目之前，使用JSFiddle進(jìn)行全面測試。
2.JSBin
JSBin是JSFiddle的簡潔純凈版的替代產(chǎn)品。如果您想使用一個更易于理解、且界面更加簡潔的工具，那么JSBin會比JSFiddle更適合您。由于該平臺提供免費(fèi)和專業(yè)訪問權(quán)限，因此只要您成為專業(yè)（pro）用戶，就能夠享受其針對私人垃圾箱、以及無限制的dropbox同步等高級功能。當(dāng)然，您也可以使用JSBin的通用訪問權(quán)限，去輕松地測試HTML、CSS和JavaScript的任何組合。
3.CodePen
CodePen是一種能夠測試HTML、CSS和JavaScript代碼的最佳在線工具。其開發(fā)者社區(qū)擁有豐富的資源。目前，它作為一個開源學(xué)習(xí)環(huán)境，不但擁有高達(dá)330000名已注冊的開發(fā)者用戶，而且正致力于開發(fā)滿足各類應(yīng)用需求的前端應(yīng)用程序?？梢哉f，它是構(gòu)建和部署網(wǎng)站，并向全網(wǎng)推廣您的產(chǎn)品，以及構(gòu)建測試用例的最佳平臺之一。
4.跨瀏覽器測試工具
雖然您可以輕松地使用JSFiddle和CodePen等工具，來測試您的JavaScript代碼，但這些工具不會向您展示目標(biāo)代碼在不同瀏覽器或移動瀏覽器中的不同輸出方式。如果您想測試代碼的跨瀏覽器兼容性，那么您需要使用諸如LambdaTest之類，能夠橫跨多種瀏覽器的在線測試工具。目前，跨瀏覽器測試工具支持實時的交互式瀏覽器測試、自動屏幕截圖測試、響應(yīng)式布局測試、以及智能可視化UI測試等。該工具能夠大幅加快您的測試周期，并協(xié)助您解決代碼中的特定瀏覽器問題。
5.Karam + Jasmine + Google Chrome
Karma是一種能夠讓您根據(jù)多種實現(xiàn)意圖，在瀏覽器中測試JavaScript代碼的工具。不過，它無法單獨(dú)測試代碼的本身，而需要依賴諸如Jasmine和Mocha等第三方庫，去執(zhí)行代碼，以開展測試。此外，它在交付形式上還需要一個真正的瀏覽器。也就是說，您必須在本地計算機(jī)上安裝Google Chrome，才能使用這種JavaScript測試方法。當(dāng)然，它是以無頭模式(headless mode)，來啟動Google Chrome，以執(zhí)行各項操作。
6.Liveweave
作為另一種可用于測試JavaScript代碼的在線工具，Liveweave具有實時的預(yù)覽功能，并配備了參考標(biāo)準(zhǔn)來幫助您進(jìn)行響應(yīng)式設(shè)計。它的HTML、CSS和JavaScript代碼提示功能，會使得初學(xué)者可以輕松地輸入基本代碼。此外，您也可以使用Liveweave將被測項目下載成為一個.zip文件，以便在代碼中輕松地添加和使用包括jQuery、AngularJS、以及Bootstrap在內(nèi)的外部庫。
7.小結(jié)
除了上述介紹的6種可以在瀏覽器中測試JavaScript代碼的流行方式，您還可以使用CSSDeck和Dabblet等工具。它們同樣便捷且易用。當(dāng)然，F(xiàn)irebug和Chrome等由大廠提供的開發(fā)者工具，通常還會提供Javascript控制臺，以方便您直接輸入JavaScript代碼，并執(zhí)行之。它們不但可以適合原生的瀏覽器，還適用于Internet Explorer 8以上、Opera、Safari、以及各種新出現(xiàn)的瀏覽器。
原文鏈接：https://dzone.com/articles/how-to-test-javascript-code-in-a-browser
譯者介紹
陳峻 （Julian Chen），51CTO社區(qū)編輯，具有十多年的IT項目實施經(jīng)驗，善于對內(nèi)外部資源與風(fēng)險實施管控，專注傳播網(wǎng)絡(luò)與信息安全知識與經(jīng)驗；持續(xù)以博文、專題和譯文等形式，分享前沿技術(shù)與新知；經(jīng)常以線上、線下等方式，開展信息安全類培訓(xùn)與授課。
