趣味與功能：Chrome 開發人員工具簡介

Dale St. Marthe

Chrome 開發人員工具提供許多強大的工具，可協助您深入檢查及改善網頁應用程式。

以下影片概略介紹六個基本工具，包括「檢查」按鈕、「裝置模式」，以及「元素」、「控制台」、「來源」和「網路」面板。此外，您將瞭解「樣式」分頁，以及自訂開發人員工具的方法。

觀看影片，瞭解如何：

• 檢查及編輯 DOM 元素。
• 使用 Box Model 以視覺化方式呈現元素尺寸，並變更元素的尺寸。
• 查看網頁在行動裝置上的呈現效果。
• 使用「Console」面板找出 JavaScript 錯誤。
• 使用「Sources」面板中的中斷點，對 JavaScript 進行偵錯。
• 在「網路」面板中分析及篩選網路活動。
• 模擬較慢的連線速度。
• 自訂開發人員工具。

如要深入瞭解相關資訊，請參閱開發人員工具總覽。