这是我参与第四届青训营笔记创作活动的第1天。
昨天上课讲了“前端必须知道的开发调试知识”，今天早上复习了PPT、查阅了资料，对Chrome Dev Tools做一个小小的总结。
Chrome Dev Tools
Elements：元素面板
用于查看或修改当前网页 HTML 节点的属性、CSS 属性、监听事件等等，HTML 和 CSS 都可以即时修改和即时显示。点击对应的行即可修改HTML，在CSS框内可以修改CSS。还可以看到当前元素绑定的事件等等。
Console：控制台面板
用于查看调试日志或异常信息，还可以在控制台输入 JavaScript 代码，方便调试。
1. Filter
2. Setting
3. **Console API**
1. console.log()
技巧：打印对象而非仅仅变量用大括号将变量包围：
{name:'oneinamelon'}
console.log({name})
输出结果：{name:'oneinamelon'}
2. console.table()
用表格形式输出结果
3. console.group()
Sources：源代码面板
用于查看页面的 HTML 文件源代码、JavaScript 源代码、CSS 源代码还可以在此面板对 JavaScript 代码进行调试，比如添加和修改 JavaScript 断点，观察 JavaScript 变量变化等。
1. breakpoint
2. stepping-into
3. stepping-over
Network：网络面板
用于查看页面加载过程中的各个网络请求，包括请求、响应等各个详情。
1. 常见用例：
1. 确保实际上实际上是在上载或下载资源
2. 检查单个资源的属性，例如其HTTP标头，内容，大小等
Performance：性能面板
用于记录和分析页面在运行时的所有活动，比如 CPU 占用情况，呈现页面性能分析结果。
1. 控制按钮
2. overview
3. 火焰图
4. 数据统计
Memory：内存面板
用于记录和分析页面占用内存情况，如查看内存占用变化，查看 JavaScript 对象和 HTML 节点的内存分配。
Application：应用面板
用于记录网站加载的所有资源信息，如存储、缓存、字体、图片等，同时也可以对一些资源进行修改和删除。
