简介:对于 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插件,结合现代流程框架的插件调试会上你更容易的针对构建前的组件及状态进行跟踪