Chrome DevTools開發者工具調試指南

課程簡介

對於 Web 開發者，尤其是前端開發工程師，Chrome 瀏覽器開發者工具幾乎成為我們每天開發調試的必備工具。那么掌握 Chrome 開發者工具會讓我們更加全面、高效地進行頁面調試和開發。本教程手把手教你全面的掌握 Chrome 開發者工具，讓你在頁面開發的過程中事半功倍！

第1章課程介紹

介紹課程大綱，快速瀏覽ChromeDevTools開發者工具的基本功能，以及如何使用快捷打開Chrome瀏覽器開發者工具

1-1課程介紹(03:06)

1-2ChromeDevTools功能簡介(02:07)

1-3打開開發者工具(03:27)

第2章使用Elements調試DOM

本章介紹了如何使用元素麵板來查看、編輯和調試HTML和DOM，學完本章你講基本掌握HTML的調試方法

2-1查看與選擇DOM節點(04:37)

2-2實時編輯HTML和DOM(04:52)

2-3在Console中訪問節點(04:16)

2-4在DOM中斷點調試(06:06)

第3章調試樣式及CSS

本章講述了如何調試頁面樣式，你將在本章掌握開發網頁樣式中常用的的基本方法

3-1查看與編輯CSS(06:16)

3-2在元素中動態增加類與偽類(03:36)

3-3快速調試CSS數值及顏色圖形動畫等(05:08)

第4章使用Console和Sources調試JavaScript

本章是課程最核心內容之一，你將掌握調試頁面JavaScript腳本最常用的方法，包括調試Log，斷點調試，在原始碼中調試等等。學完本章內容將輔助你更快速地在日常開發工作中調試腳本，讓你事半功倍

4-1Console面板簡介與互動式命令(05:24)

4-2在Console中調試Log日誌(17:15)

4-3調試JavaScript的基本流程以及如何使用斷點調試(16:39)

4-4Sources面板簡介(06:26)

4-5使用Snippets來輔助Debugging(05:09)

4-6使用DevTools作為代碼編輯器(05:33)

第5章調試網路

本章也是課程核心內容之一，使用Network面板將讓你非常容易的對頁面請求進行抓包，分析以及做性能最佳化

5-1Network面板簡介(04:01)

5-2使用Network詳細分析請求(12:34)

5-3使用NetworkWaterfall分析頁面載入性能(05:17)

第6章客戶端存儲Application面板