Chrome浏览器F12的奥秘

一、各种面板

元素面板：使用“元素”面板可以通过自由操纵DOM和CSS来重演您网站的布局和设计。

控制台面板：在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell，在页面上与JavaScript交互

源代码面板：在源代码面板中设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器

网络面板：从发起网页页面请求Request后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），并可以根据这个进行网络性能优化

内存面板：分析web应用或者页面的执行时间以及内存使用情况

应用面板：记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、-IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等

安全面板：使用安全面板调试混合内容问题，证书问题等等

性能面板：使用时间轴面板，可以通过记录和查看网站生命周期内发生的各种事件来提高页面运行时的性能

二、Network

Network-Controls控件

Requests Table请求列表

此列表列出了检索的每个资源。默认情况下，此表按时间顺序排序，也就是最早的资源在顶部。单击资源名称可以获得更多信息。

Headers：请求的url地址，请求方式以及请求的状态等与资源关联的HTTP标头。

Preview：Response返回的json,图像，文本资源的预览。

Response：Http响应数据。

Timing：资源请求生命周期的精细分解。

三、Source