在瀏覽器測試JavaScript的方法

在瀏覽器測試JavaScript的方法

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


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

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

OIP-C

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代碼的一些最流行的方法。除此以外,你甚至還可以使用CSSDeckDabblet這樣的工具。這些都是同樣好的,而且很容易使用。除此之外,Firebug和Chrome開發者工具都有Javascript控制檯,你可以在那裏輸入JavaScript代碼進行執行。這同樣適用於Internet Explorer 8+、Opera、Safari和可能的許多其他現代瀏覽器。



今天先到這兒,希望對雲原生,技術領導力, 企業管理,系統架構設計與評估,團隊管理, 項目管理, 產品管管,團隊建設 有參考作用 , 您可能感興趣的文章:
領導人怎樣帶領好團隊
構建創業公司突擊小團隊
國際化環境下系統架構演化
微服務架構設計
視頻直播平臺的系統架構演化
微服務與Docker介紹
Docker與CI持續集成/CD
互聯網電商購物車架構演變案例
互聯網業務場景下消息隊列架構
互聯網高效研發團隊管理演進之一
消息系統架構設計演進
互聯網電商搜索架構演化之一
企業信息化與軟件工程的迷思
企業項目化管理介紹
軟件項目成功之要素
人際溝通風格介紹一
精益IT組織與分享式領導
學習型組織與企業
企業創新文化與等級觀念
組織目標與個人目標
初創公司人才招聘與管理
人才公司環境與企業文化
企業文化、團隊文化與知識共享
高效能的團隊建設
項目管理溝通計劃
構建高效的研發與自動化運維
某大型電商雲平臺實踐
互聯網數據庫架構設計思路
IT基礎架構規劃方案一(網絡系統規劃)
餐飲行業解決方案之客戶分析流程
餐飲行業解決方案之採購戰略制定與實施流程
餐飲行業解決方案之業務設計流程
供應鏈需求調研CheckList
企業應用之性能實時度量系統演變

如有想了解更多軟件設計與架構, 系統IT,企業信息化, 團隊管理 資訊,請關注我的微信訂閱號:

MegadotnetMicroMsg_thumb1_thumb1_thu[2]

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章