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