簡介：對(duì)于 Web 開發(fā)者，尤其是前端開發(fā)工程師，Chrome 瀏覽器開發(fā)者工具幾乎成為我們每天開發(fā)調(diào)試的必備工具。那么掌握 Chrome 開發(fā)者工具會(huì)讓我們更加全面、高效地進(jìn)行頁面調(diào)試和開發(fā)。本教程手把手教你全面的掌握 Chrome 開發(fā)者工具，讓你在頁面開發(fā)的過程中事半功倍！
第1章 課程介紹
介紹課程大綱，快速瀏覽Chrome DevTools開發(fā)者工具的基本功能，以及如何使用快捷打開Chrome瀏覽器開發(fā)者工具
第2章 使用 Elements 調(diào)試 DOM
本章介紹了如何使用元素面板來查看、編輯和調(diào)試HTML和DOM，學(xué)完本章你講基本掌握HTML的調(diào)試方法
第3章 調(diào)試樣式及 CSS
本章講述了如何調(diào)試頁面樣式，你將在本章掌握開發(fā)網(wǎng)頁樣式中常用的的基本方法
第4章 使用 Console 和 Sources 調(diào)試 JavaScript
本章是課程最核心內(nèi)容之一，你將掌握調(diào)試頁面JavaScript腳本最常用的方法，包括調(diào)試Log，斷點(diǎn)調(diào)試，在源代碼中調(diào)試等等。學(xué)完本章內(nèi)容將輔助你更快速地在日常開發(fā)工作中調(diào)試腳本，讓你事半功倍
第5章 調(diào)試網(wǎng)絡(luò)
本章也是課程核心內(nèi)容之一，使用Network面板將讓你非常容易的對(duì)頁面請(qǐng)求進(jìn)行抓包，分析以及做性能優(yōu)化
第6章 客戶端存儲(chǔ) Application 面板
本章介紹如何調(diào)試客戶端存儲(chǔ)，包括學(xué)會(huì)如何對(duì)Cookie，LocalStorage等調(diào)試
第7章 調(diào)試移動(dòng)端、H5 頁面及遠(yuǎn)程調(diào)試
本章介紹使用Chrome開發(fā)這工具針對(duì)移動(dòng)端瀏覽器進(jìn)行頁面的調(diào)試
第8章 在 DevTools 中集成 React 和 Vue 插件
本章介紹如何安裝React和Vue插件，結(jié)合現(xiàn)代流程框架的插件調(diào)試會(huì)上你更容易的針對(duì)構(gòu)建前的組件及狀態(tài)進(jìn)行跟蹤