Chrome DevTools开发者工具调试指南

学习地址: 慕课网
简介：对于 Web 开发者，尤其是前端开发工程师，Chrome 浏览器开发者工具几乎成为我们每天开发调试的必备工具。那么掌握 Chrome 开发者工具会让我们更加全面、高效地进行页面调试和开发。本教程手把手教你全面的掌握 Chrome 开发者工具，让你在页面开发的过程中事半功倍！

Chrome DevTools功能简介(9大功能面板)

1. Elements 元素面板

检查和调整页面，调试DOM，调试CSS

Elements元素面板

2. Network网络面板

调试请求，了解页面静态资源分布，网页性能检测

Network网络面板

3. Console控制面板

调试JS，查看console log 日志， 交互式代码调试

Console控制面板

4. Source源代码资源面板

调试JS页面代码，进行断点调试代码

Source源代码资源面板

5. Application 应用面板

查看&调试客户端存储，如:Cookie, LocalStorage,SessionStorage等

Application应用面板

6. Performance性能面板

查看页面性能细节，细粒度度网页载入进行性能优化（高阶）

Performance性能面板

7. Memory内存面板

JS CPU分析器，内存堆分析器（高阶）

Memory内存面板

8. Sucurity安全面板

查看页面安全及证书问题

Scurity安全面板

9. Lighthouse(Audits)面板

使用Google Lighthouse辅助性能分析，给出优化建议（高阶）

打开Chrome

调试DOM

在Element面板中，我们除了可以直接修改HTML内容，还可以修改样式，以及一些其他的操作：添加属性，修改属性等等。

DOM调试

查看调试CSS

在元素中动态增加类与伪类

Console

Shift+回车，阻止换行执行代码。

之后的就不一一举例了，打开对应的控制面板，探索探索，就能找到自己想要的东西。

CTRL + SHIFT + P

呼出命令面板

在调试移动端时，可以搜索sensor命名， 有一些地区，手机放置方式和touch的控制：