尋找站點性能問題的Web開發人員應在Firefox Web開發人員工具包中使用此工具,那麼如何使用Firefox性能工具測試網站性能?下面講一一介紹。
Firefox是用戶的絕佳網絡瀏覽器。它也是開發人員最好的瀏覽器之一。為什麼?因為開源應用程式包含許多專門為開發人員設計的工具。這些工具包括Page Inspector(用於檢查和修改頁面的HTML和CSS),Web Console(用於記錄與網頁關聯的信息)和JavaScript Debugger。
「 Web開發人員」菜單中的另一個工具是「性能」工具,它使您能夠深入了解站點的響應能力,JavaScript和布局性能。該工具還允許您隨時間創建網站的記錄或配置文件。停止錄製後,將向您提供瀏覽器中呈現網站的所有操作的概述。
性能帶有四個將要使用的子工具:
瀑布: 顯示瀏覽器在您使用被測試網站時執行的不同操作。調用樹: 顯示JavaScript函數。火焰圖: 顯示JavaScript調用堆棧。分配視圖: 顯示您的代碼進行的堆分配。如何啟動Firefox性能工具
您必須做的第一件事是啟動性能工具。為此,請打開Firefox,然後單擊右上角的菜單按鈕。單擊Web開發人員| 性能。這將在瀏覽器窗口的底部打開一個新窗格。
接下來,瀏覽到相關站點,然後單擊「開始錄製性能」按鈕。錄製開始後,請在要測試的站點內採取措施。然後,性能工具將開始收集數據。
性能緩衝區將很快填滿。一旦填滿,它將開始覆蓋較早的數據,因此應確定是否要保留第一個數據,以觀察緩衝區百分比並在達到100%之前停止記錄。
Performance停止錄製後,它將顯示發現的內容。然後,您可以滾動瀏覽每條記錄並選擇一個對象,這將在右窗格中打開詳細信息(圖C)。
您將在詳細信息內看到一個連結(在上面的實例中,該連結為osd.js:1)。單擊該連結以打開調試器,該調試器將顯示與所選對象關聯的代碼(圖D)。
然後,您可以返回到「性能」選項卡,以繼續梳理已記錄配置文件中的每條記錄。單擊「調用樹」(圖E)或「火焰圖」,以進一步了解代碼的性能。
如果要保存此配置文件,請單擊左側邊欄中的「保存」。這會將配置文件作為JSON文件下載到本地驅動器。您可以通過單擊左側邊欄中的導入按鈕(時鐘右側的圖標)來查看保存的配置文件。打開保存的JSON文件,您可以瀏覽以前記錄的配置文件。
Firefox Performance Tool是每個Web開發人員都應使用的工具,可以幫助您解決網站未達到您的標準的原因。它易於使用,免費,並且為您的調試需求提供了足夠多的信息。