譯者 | 陳峻
審校 | 孫淑娟
通常，測試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項目實施經驗，善于對內外部資源與風險實施管控，專注傳播網絡與信息安全知識與經驗；持續以博文、專題和譯文等形式，分享前沿技術與新知；經常以線上、線下等方式，開展信息安全類培訓與授課。
