这是我参与「第四届青训营 」笔记创作活动的的第8天。
前端调试工具
Chrome Dev Tools
在页面上右键并点击检查或者按 F12 可以打开 Chrome Dev Tools。
Element 元素查看器
在 Element 选项可以看到当前页面（Web App)中的 DOM 结构，同时边栏还能同时编辑样式。可以在这里手动修改 DOM 以及元素的内容、样式、属性等。
Console 控制台面板
用于查看调试日志或异常信息，同时可在控制台输入 JavaScript 代码，方便后续调试。 由于Console的功能特点，有些网站还会在自己的页面中加入一些彩蛋。
Sources 代码查看器
Sources 面板在早期主要负责查看HTML源代码和JS源代码，操作程序断点。现在面板可以查看页面中所有的文件，并且能切换显示模式，对于一些压缩化的代码，Sources提供了格式化功能。
Network 网络监视器
Network面板在开启时，能收集页面中所有的网络请求信息和通讯流量，相比于使用外部的工具，面板在场景还原，通讯细节分析方面有独到的优势，如页面的网络异常，只需要刷新后看一下Network的加载瀑布图，就能发现当前问题。
Performance 性能面板
用于记录和分析页面在运行时进行的的所有活动，例如 CPU 占用情况，当页面发生卡顿时，可以使用Performance来分析当前问题发生的原因。
Memory：内存面板
用于记录和分析页面占用内存情况，如查看内存占用变化，查看 JavaScript 对象和 HTML 节点的内存分配。
测量资源加载时间
使用 Network 面板记录和分析网络活动
整体或单独查看资源的加载信息
过滤和排序资源的显示方式
保存、复制和清除网络记录
