在瀏覽器測試JavaScript的方法

在瀏覽器測試JavaScript的方法

JSFiddle
Cross Browser Testing Tool
Karam + Jasmine + Google Chrome
CodePen
JSBin
Liveweave

     測試JavaScript是一件很痛苦的事情。很多工具、技術和框架已經被開發出來，以使這個過程儘可能的不痛苦。其中一些工具如Mocha、Jasmine和Jest提供了一個測試結構，而其他一些工具如Istanbul和Blanket也會生成代碼覆蓋報告。在瀏覽器中測試JavaScript代碼的不同方法有不同的前景和後果。很難將範圍縮小到一個工具或技術上，來解決所有的問題!

讓我們快速瞭解一下在瀏覽器中測試JavaScript代碼的一些最流行的方法:

1. JSFiddle
    無論你是使用JavaScript還是React和Vue等框架，JSFiddle都是適合你的工具。它是一個線上工具，可以在瀏覽器中編寫和測試JavaScript代碼。它在2009年作為 "Mooshell "推出。如果你正在開發一個網路應用程式並使用任何類型的JavaScript庫，那麼JSFiddle是值得一看的東西。它的界面非常簡單，你只需要輸入一些JavaScript，甚至添加一些HTML和CSS，就可以立即看到結果。在使用JSFiddle將你的JavaScript代碼片段添加到你的項目中之前，先對它們進行測試!

2. 跨瀏覽器測試工具
    儘管你可以很容易地使用JSFiddle和CodePen等工具來測試你的JavaScript代碼，但這些工具不會顯示你的代碼在不同瀏覽器或移動瀏覽器中的輸出情況。如果你想測試你的代碼的跨瀏覽器相容性，你需要使用LambdaTest這樣的線上跨瀏覽器測試工具。它可以實現實時互動的瀏覽器測試，自動截圖測試，響應式佈局測試，以及智能視覺UI測試。該工具將大大加快你的測試周期，並幫助你解決代碼中的特定瀏覽器問題。

3. Karma + Jasmine + Google Chrome
    Karma是一個讓你在瀏覽器中測試JavaScript代碼的工具，有很多測試目的。然而，它並不測試代碼本身。它執行代碼，但依靠第三方庫如Jasmine和Mocha進行測試。除此以外，它還需要一個真正的瀏覽器。因此，谷歌瀏覽器必須安裝在你的本地機器上，這種方法的JavaScript才能發揮作用。它在無頭模式下啟動谷歌瀏覽器進行操作。

4. CodePen
     CodePen是最好的線上工具之一，可以線上測試你的HTML、CSS和JavaScript代碼。這個開發者社區有很多東西要教! 這個開源的學習環境可能有可能是最大的開發者社區，有高達33萬的註冊用戶在不斷努力開發驚人的前端應用程式。它是建立和部署網站、向世界展示你的工作和建立測試案例的最佳平臺之一。

5. JSBin
     JSBin是JSFiddle的一個整潔的替代品。如果你想要一個更容易理解和不那麼雜亂的界面，那麼JSBin就是你要的工具。該平臺有一個免費和一個專業的訪問許可權。對於像私有倉和無限制的Dropbox同步這樣的高級功能，你需要使用專業版，然而，你可以使用JSBin的一般訪問許可權輕鬆地測試HTML、CSS和JavaScript的任何組合。

6. Liveweave
     Liveweave是另一個編碼游樂場，你可以在那裡測試你的JavaScript代碼。它具有實時預覽功能，並配備了一個標尺來幫助你進行響應式設計。它的HTML、CSS和JavaScript的代碼提示功能使初學者很容易輸入代碼。除此之外，你可以使用Liveweave將你的項目下載為一個.zip文件，還可以在你的代碼中很容易地添加和使用外部庫，如jQuery、AngularJS、Bootstrap等。

    這些是在瀏覽器中測試你的JavaScript代碼的一些最流行的方法。除此以外，你甚至還可以使用CSSDeck和Dabblet這樣的工具。這些都是同樣好的，而且很容易使用。除此之外，Firebug和Chrome開發者工具都有Javascript控制台，你可以在那裡輸入JavaScript代碼進行執行。這同樣適用於Internet Explorer 8+、Opera、Safari和可能的許多其他現代瀏覽器。

如有想瞭解更多軟體設計與架構, 系統IT,企業信息化, 團隊管理 資訊，請關註我的微信訂閱號：

作者：Petter Liu
出處：http://www.cnblogs.com/wintersun/
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。 該文章也同時發佈在我的獨立博客中-Petter Liu Blog。