为了账号安全,请及时绑定邮箱和手机立即绑定

Chrome DevTools开发者工具调试指南

宗泽 Web前端工程师
难度入门
时长 2小时18分
学习人数
综合评分100
11人评价 查看评价
10.0 内容实用
10.0 简洁易懂
10.0 逻辑清晰
简介:对于 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插件,结合现代流程框架的插件调试会上你更容易的针对构建前的组件及状态进行跟踪

第9章 总结

本章对课程进行总结
课程须知
本课程是Web开发工具类 1、首先需要下载并安装Chrome浏览器 2、了解基本的前端语言HTML、CSS、JavaScript语法即可
老师告诉你能学到什么?
1、Chrome开发者工具的全面介绍 2、掌握调试页面的DOM和HTML 3、掌握调试页面样式CSS 4、全面掌握调试页面JavaScript及Log日志 5、掌握断点调试程序中Bug的方法 6、学会使用网络Network查看页面请求与分析 7、学会调试客户端存储 8、学会安装并使用React及Vue插件
意见反馈 邀请有奖 帮助中心 APP下载
官方微信