使用 Chrome 開發人員工具進行進階網路分析。

使用開發人員工具記錄及分析效能追蹤記錄。

在「效能」面板中監控即時 Core Web Vitals 指標。

使用開發人員工具檢查快取並排解相關問題。

凍結 DOM 中的元素，以便您使用 DevTools 檢查這些元素。

瞭解 4 種使用開發人員工具擷取螢幕截圖的獨特方法。

瞭解如何使用開發人員工具覆寫及模擬網路回應。

瞭解開發人員工具如何改善您的網頁應用程式開發。

運用推測載入功能加快網頁瀏覽速度，並瞭解如何進行偵錯。

只要按幾下滑鼠，即可瞭解如何編寫顏色。

瞭解如何偵錯擷取優先順序。

瞭解如何對 bfcache 偵錯，讓您的頁面立即載入。

瞭解如何使用開發人員工具對 DOM 進行偵錯。

瞭解如何使用開發人員工具對 Chrome 擴充功能進行偵錯。

使用程式碼片段執行您常用的程式碼，並透過即時運算式即時查看值。

使用中斷點和記錄點即可輕鬆偵錯。

瞭解如何使用開發人員工具中的錄音工具面板錄製、重播及偵錯使用者流程。

使用 Application > 本機 Storage 和 Session Storage 對鍵/值組合進行偵錯。

使用 Workspace 將您在開發人員工具中所做的變更儲存至本機來源檔案。

使用開發人員工具中的來源對應，對原始程式碼進行偵錯，而非部署。

瞭解來源對應如何協助您對原始程式碼 (而非部署) 進行偵錯。

使用「Styles」和「Computed」窗格來找出開發人員工具的 CSS 問題。

使用開發人員工具對漸進式網頁應用程式進行偵錯。

使用開發人員工具對 Project Fugu API 進行偵錯。

使用開發人員工具中的裝置模式模擬 Mobule 裝置。

使用「CSS 總覽」面板找出 CSS 可能的改善空間。

瞭解如何使用快速鍵和設定，以加快開發人員工具的導覽速度，加快工作流程。

探索 Chrome 開發人員工具的開啟方式。

瞭解如何使用 Chrome 開發人員工具找出並修正低對比文字。

使用「錄音工具」面板及其擴充功能編輯、偵錯及匯出使用者流程錄製內容。

瞭解如何使用 Chrome 開發人員工具檢查、修改 CSS Flexbox 版面配置，並進行偵錯。

您可以運用 Console Utilities API 提供的快速鍵，快速參考近期元素、查詢物件、監控事件和函式呼叫等。

瞭解如何使用 Chrome 開發人員工具查看及變更 CSS 格線版面配置。

使用「Animations」分頁檢查及修改 CSS 動畫、轉場效果等。

運用全新「效能深入分析」面板，取得可做為行動依據的洞察資料

使用主控台記錄變數、物件和訊息、篩選及分組訊息，以及執行其他操作。

使用「轉譯」分頁模擬使用者的偏好設定，並測試使用者調整網站的行為。

使用開發人員工具檢查 CSS 容器查詢並進行偵錯。