在 web 開發中，
網頁效能對於使用者體驗和業務的成功至關重要。
一個快速、流暢且沒有錯誤的網站會給使用者留下更好的印象 ，導致更高的使用者保留率、更低的跳出率，以及更好的轉化率。
DevTools 它為開發者提供了一個即時、詳細和 直觀的方式來檢查和最佳化其網站。 使用 DevTools，開發者可以在沒有第三方工具的情況下，直接在瀏覽器中獲取關於其網站效能的深入見解，並立即采取行動進行最佳化。 在開發過程中，它為叠代和改進提供了一個簡單、高效的工具，使開發者可以持續提高網站的效能和使用者體驗。
1. 開啟 DevTools
捷徑：Windows/Linux 使用 Ctrl + Shift + I，Mac 使用 Cmd + Option + I。
或在網頁上右擊選擇「檢查」。
2. 使用 Performance 面板
切換到 Performance 面板。
點選錄制按鈕（紅圈），然後重新整理頁面或進行相應的操作。
停止錄制後，DevTools 會展示一個詳細的載入和執行時記錄。
主要部份：
FPS：展示頁面渲染的幀速。
CPU：展示 CPU 使用情況。
NET：顯示資源載入時間。
點選任何部份可以放大細節。在時間軸上，你可以看到各種事件，如布局、指令碼執行、樣式計算等。這可以幫助你找到可能的效能瓶頸。
3. 使用 Network 面板
切換到 Network 面板。
重新整理頁面。
你會看到所有的資源載入列表，如 JS、CSS、圖片等。可以根據資源的大小、完成時間等進行排序，找到需要最佳化的資源。
4. 使用 Audits 面板
切換到 Audits 面板。
點選 Run audits。
DevTools 將對你的頁面進行評估，並給出關於效能、可存取性、最佳實踐等方面的建議。
5. 使用 Console 面板
切換到 Console 面板。
這裏會顯示所有的 JavaScript 錯誤、警告和日誌，有助於找到執行時的問題。
6. 使用 Sources 面板
切換到 Sources 面板。
在這裏，你可以直接編輯和保存 JavaScript 和 CSS，對程式碼進行偵錯，並設定斷點。
最佳化建議
減少資源大小：使用工具如 Terser、UglifyJS 對 JavaScript 進行壓縮，使用 CSSNano 對 CSS 進行壓縮，使用 TinyPNG 對圖片進行壓縮。
減少請求次數：使用圖片精靈、SVG 精靈、HTTP2、代分碼割等技術減少資源請求次數。
使用緩存：為資源設定適當的緩存策略，如使用 Service Workers 做前端緩存。
最佳化程式碼：減少 DOM 存取次數，使用請求動畫幀（requestAnimationFrame）進行動畫，避免在迴圈中進行昂貴的操作等。
延遲載入：對非關鍵資源使用懶載入。
總結
Chrome DevTools 是一個強大的工具集，用於幫助開發者分析和最佳化網頁效能。
透過對頁面進行詳細的分析，你可以找到和修復各種效能問題，為使用者提供更好的體驗。
點選下方公眾號，回復關鍵字： chrome 獲取 chrome安裝包及 chrome 外掛程式等資料。
