谷歌浏览器调试

Chrome每个模块及其主要功能为：

Element ： 用于查看和编辑当前页面中的 HTML 和 CSS 元素。

Network ：用于查看 HTTP 请求的详细信息，如请求头、响应头及返回内容等。

Source ：用于查看和调试当前页面所加载的脚本的源文件。

TimeLine ： 用于查看脚本的执行时间、页面元素渲染时间等信息。

Profiles ：用于查看 CPU 执行时间与内存占用等信息。

Resource ：用于查看当前页面所请求的资源文件，如 HTML，CSS 样式文件等。

Audits ：用于优化前端页面，加速网页加载速度等。

Console ：用于显示脚本中所输出的调试信息，或运行测试脚本等。

1. 禁用缓存。（network） 

2. 查看动画性能（Performance） 

使用教程 https://developers.google.cn/web/tools/chrome-devtools/evaluate-performance/timeline-tool?hl=zh-cn

面板包含以下四个窗格：

1. Controls。开始记录，停止记录和配置记录期间捕获的信息。
2. Overview。 页面性能的高级汇总。更多内容请参见下文。

3. 火焰图。 CPU 堆叠追踪的可视化。可以在火焰图上看到一到三条垂直的虚线。蓝线代表 DOMContentLoaded 事件。 绿线代表首次绘制的时间。 红线代表 load 事件。

4. Details。选择事件后，此窗格会显示与该事件有关的更多信息。 未选择事件时，此窗格会显示选定时间范围的相关信息

 Overview 窗格包含以下三个图表：

1. FPS。每秒帧数。绿色竖线越高，FPS 越高。 FPS 图表上的红色块表示长时间帧，很可能会出现卡顿。

2. CPU。 CPU 资源。此面积图指示消耗 CPU 资源的事件类型。

NET。每条彩色横杠表示一种资源。横杠越长，检索资源所需的时间越长。 每个横杠的浅色部分表示等待时间（从请求资源到第一个字节下载完成的时间）。

横杠按照以下方式进行彩色编码：

• HTML 文件为蓝色。
• 脚本为黄色。
• 样式表为紫色。
• 媒体文件为绿色。
• 其他资源为灰色。