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