Chrome浏览器F12的奥秘

一、各种面板

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

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

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

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

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

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

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

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

二、Network

Network-Controls控件</