在瀏覽器測試JavaScript的方法

来源:https://www.cnblogs.com/wintersun/archive/2022/05/21/16295624.html
-Advertisement-
Play Games

在瀏覽器測試JavaScript的方法 JSFiddle Cross Browser Testing Tool Karam + Jasmine + Google Chrome CodePen JSBin Liveweave 測試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。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • head head 命令可用於查看文件的開頭部分的內容,有一個常用的參數 -n 用於顯示行數,預設為 10,即顯示 10 行的內容。 命令格式: head [參數] [文件] 參數: -q或--quiet或--silent 不顯示包含給定文件名的文件頭即隱藏文件名。 -v或--verbose 總是顯 ...
  • 出現mysqld: Can't create directory 'D:\Environment\mysql-5.7.37 \data' (Errcode: 2 - No such file or directory)極大原因是my.ini的配置有問題 my.ini配置 [mysqld] based ...
  • 分享嘉賓:牟娜 阿裡巴巴 高級演算法工程師 編輯整理:孫鍇 內容來源:DataFun AI Talk《定向廣告新一代點擊率預估主模型——深度興趣演化網路》 出品社區:DataFun 導讀: 本次帶給大家分享是阿裡媽媽在2018年做的模型上的創新——深度興趣演化網路(Deep Interest Evol ...
  • 一、概述 Oozie是一個基於工作流引擎的開源框架,依賴於MapReduce來實現,是一個管理 Apache Hadoop 作業的工作流調度系統。是由Cloudera公司貢獻給Apache的,它能夠提供對Hadoop MapReduce和Pig Jobs的任務調度與協調。Oozie需要部署到Java ...
  • B+樹索引的正確使用 索引並不是越多越好,索引創建越多,MySQL維護的代價越高,如果SQL未能完全使用到索引,創建索引的意義是不大的。 適用條件 表x,創建索引a,b,c。主鍵y。 全值匹配 select * from x where a = '' and b = '' and c = '' 當我 ...
  • 導讀: 線上社交媒體平臺的發展,帶來了細粒度檢索、視頻語義摘要等媒體智能服務的巨大需求。現有的視頻理解技術缺乏深入的語義線索,結合視頻中人物的社交關係才能更完整、準確地理解劇情,從而提升用戶體驗,支撐智能應用。這裡主要介紹我們將動態分析和圖機器學習相結合,圍繞視頻中的人物社交關係網路所開展的兩個最新 ...
  • 問題描述:發現主庫操作數據從庫沒有變動問題,可能原因是從庫重啟導致的無法同步問題。 排查思路: 1、查看主從複製狀態 發現從庫的IO和SQL進程都是no(正常狀態應該是yes) 註意:mysql replication中slave機器上有兩個關鍵進程,死一個都不行,一個是slave_sql_runn ...
  • Toolbar 新建項目會預設顯示ActionBar,ActionBar根據項目指定的主題來顯示,android:theam指定主題,在res/values/theams.xml中定義主題,因為用toolbar代替ActionBar,所以將parent主題設置為不帶ActionBar的主題,如下: ...
一周排行
    -Advertisement-
    Play Games
  • 前言 本文將以 C# 語言來實現一個簡單的布隆過濾器,為簡化說明,設計得很簡單,僅供學習使用。 感謝@時總百忙之中的指導。 布隆過濾器簡介 布隆過濾器(Bloom filter)是一種特殊的 Hash Table,能夠以較小的存儲空間較快地判斷出數據是否存在。常用於允許一定誤判率的數據過濾及防止緩存 ...
  • 目錄 一.簡介 二.效果演示 三.源碼下載 四.猜你喜歡 零基礎 OpenGL (ES) 學習路線推薦 : OpenGL (ES) 學習目錄 >> OpenGL ES 基礎 零基礎 OpenGL (ES) 學習路線推薦 : OpenGL (ES) 學習目錄 >> OpenGL ES 轉場 零基礎 O ...
  • 「簡單有價值的事情長期堅持做」 這是成功最簡單,但也最難學的秘訣。不經過訓練,人很難意識到時間複利的威力。 仙劍奇俠傳的「十里坡劍神」和金庸群俠傳的「十級野球拳」,就是簡單的事情持之以恆反覆做,最後就有巨大的威力 唐家三少成為網文收入第一,最重要的一步是十四年從未斷日更 這樣的案例很多,一開始可能成 ...
  • 迎面走來了你的面試官,身穿格子衫,挺著啤酒肚,髮際線嚴重後移的中年男子。 手拿泡著枸杞的保溫杯,胳膊夾著MacBook,MacBook上還貼著公司標語:“我愛加班”。 面試開始,直入正題。 面試官: 看你簡歷上面寫著精通MySQL,我先問你事務的特性是什麼? 老生常談,這個還有誰不會背的嗎? 我: ...
  • 基礎知識 python是一門腳本語言,它是解釋執行的。 python使用縮進做為語法,而且python2環境下同一個py文件中不能同時存在tab和空格縮進,否則會出錯,建議在IDE中顯示縮進符。 python在聲明變數時不寫數據類型,可以type(xx)來獲取欄位的類型,然後可以int(),list ...
  • 為什麼要多線程下載 俗話說要以終為始,那麼我們首先要明確多線程下載的目標是什麼,不外乎是為了更快的下載文件。那麼問題來了,多線程下載文件相比於單線程是不是更快? 對於這個問題可以看下圖。 橫坐標是線程數,縱坐標是使用對應線程數下載對應文件時花費的時間,藍橙綠代表下載文件的大小,每個線程下載對應文件2 ...
  • 詳細講解python爬蟲代碼,爬微博搜索結果的博文數據。 爬取欄位: 頁碼、微博id、微博bid、微博作者、發佈時間、微博內容、轉發數、評論數、點贊數。 爬蟲技術: 1、requests 發送請求 2、datetime 時間格式轉換 3、jsonpath 快速解析json數據 4、re 正則表達式提... ...
  • 背景: 一般我們可以用HashMap做本地緩存,但是HashMap功能比較弱,不支持Key過期,不支持數據範圍查找等。故在此實現了一個簡易的本地緩存,取名叫fastmap。 功能: 1.支持數據過期 2.支持等值查找 3.支持範圍查找 4.支持key排序 實現思路: 1.等值查找採用HashMap2 ...
  • 目錄 一.簡介 二.效果演示 三.源碼下載 四.猜你喜歡 零基礎 OpenGL (ES) 學習路線推薦 : OpenGL (ES) 學習目錄 >> OpenGL ES 基礎 零基礎 OpenGL (ES) 學習路線推薦 : OpenGL (ES) 學習目錄 >> OpenGL ES 轉場 零基礎 O ...
  • 本章是系列文章的第八章,用著色演算法進行寄存器的分配過程。 本文中的所有內容來自學習DCC888的學習筆記或者自己理解的整理,如需轉載請註明出處。周榮華@燧原科技 寄存器分配 寄存器分配是為程式處理的值找到存儲位置的問題 這些值可以存放到寄存器,也可以存放在記憶體中 寄存器更快,但數量有限 記憶體很多,但 ...