文章目錄
-
-
- 說明
- 主界面
-
說明
作為前端開發者，是一定要學會使用chrome浏覽器的devtools工具的，本篇文章旨在以圖形化的界面幫助大家梳理出工具的使用方法。
版本是91.0.4472.124(64位）
主界面
針對主界面，我按照序号，進行了總結
| 序号 | 名稱 | 作用 |
|---|---|---|
| 工具頭部 | 顯示通路網址 | |
| 1 | 滑鼠選擇 | 用來拾取網頁上的節點元素 |
| 2 | 裝置切換鍵 | 用來調整網頁的大小 |
| 3 | elements | 在 Elements 面闆中可以通過 DOM 樹的形式檢視所有頁面元素，同時也能對這些頁面元素進行所見即所得的編輯 |
| 4 | console | 一方面用來記錄頁面在執行過程中的資訊（一般通過各種 console 語句來實作），另一方面用來當做 shell 視窗來執行腳本以及與頁面文檔、DevTools等進行互動 |
| 5 | source | 該面闆中主要用來進行一些調試和檢視源碼 |
| 6 | network | 在 Network 面闆中可以檢視通過網絡來請求來的資源的詳細資訊以及請求這些資源的耗時 |
| 7 | performance | 在 Performance 面闆可以檢視頁面加載過程中的詳細資訊，比如在什麼時間開始做什麼事情，耗時多久等等。有人會問，這個跟上面的 Network 有什麼差別呢，上面也能顯示耗時資訊。在 Performance 面闆中，你不僅可以看到通過網絡加載資源的資訊，還能看到解析 JS、計算樣式、重繪等頁面加載的方方面面的資訊 |
| 8 | memory | Memory 面闆主要顯示頁面 JS 對象和相關聯的 DOM 節點的記憶體分布情況 |
| 9 | application | 記錄網頁加載的所有資源，包括存儲資訊、緩存資訊以及頁面用到的圖檔、字型、腳本、樣式等資訊 |
| 10 | security | 用于檢測當面頁面的安全性 |
| 11 | lighthouse | 審計面闆會對頁面的加載進行分析，然後給出提高頁面性能的建議，官網建議檢視 PageSpeed Insights 來獲得更多的頁面加載建議。 |
還想知道啥。。可以留言