• 第1章 課程介紹
• 視頻：1-1 課程介紹(03:06)
• 視頻：1-2 Chrome DevTools 功能簡介(02:07)
• 視頻：1-3 打開開發(fā)者工具(03:27)

• 第2章 使用 Elements 調(diào)試 DOM
• 視頻：2-1 查看與選擇 DOM 節(jié)點(diǎn)(04:37)
• 視頻：2-2 實(shí)時(shí)編輯 HTML 和 DOM(04:52)
• 視頻：2-3 在 Console 中訪問節(jié)點(diǎn)(04:16)
• 視頻：2-4 在 DOM 中斷點(diǎn)調(diào)試(06:06)

• 第3章 調(diào)試樣式及 CSS
• 視頻：3-1 查看與編輯 CSS(06:16)
• 視頻：3-2 在元素中動(dòng)態(tài)增加類與偽類(03:36)
• 視頻：3-3 快速調(diào)試 CSS 數(shù)值及顏色圖形動(dòng)畫等(05:08)

• 第4章 使用 Console 和 Sources 調(diào)試...
• 視頻：4-1 Console 面板簡介與交互式命令(05:24)
• 視頻：4-2 在 Console 中調(diào)試 Log 日志(17:15)
• 視頻：4-3 調(diào)試 JavaScript...(16:39)
• 視頻：4-4 Sources 面板簡介(06:26)
• 視頻：4-5 使用 Snippets 來輔助...(05:09)
• 視頻：4-6 使用 DevTools 作為代碼編輯器(05:33)

• 第5章 調(diào)試網(wǎng)絡(luò)
• 視頻：5-1 Network 面板簡介(04:01)
• 視頻：5-2 使用 Network 詳細(xì)分析請(qǐng)求(12:34)
• 視頻：5-3 使用 Network Waterfall...(05:17)

• 第6章 客戶端存儲(chǔ) Application 面板
• 視頻：6-1 查看與調(diào)試 Cookie(05:49)
• 視頻：6-2 查看與調(diào)試 LocalStorage 與...(04:16)

• 第7章 調(diào)試移動(dòng)端、H5 頁面及遠(yuǎn)程調(diào)試
• 視頻：7-1 模擬移動(dòng)設(shè)備(03:15)
• 視頻：7-2 使用 Chrome DevTools 進(jìn)行...(06:41)

• 第8章 在 DevTools 中集成 React 和 Vue 插件
• 視頻：8-1 集成 React 插件(05:04)
• 視頻：8-2 集成 Vue 插件(02:49)

• 第9章 總結(jié)
• 視頻：9-1 課程總結(jié)(05:01)