chrome开发者工具

1:chrome开发者工具之10大面板功能

1)Elements面板：可以查看dom结构，编辑css样式，用于测试页面布局和设计页面
2)Console面板：可以看成是Javascript Shell,能执行javascript脚本。通过console还能和页面中的javascript对象交互。
3)Sources面板: 1、查看Web应用加载的所有文件 2、编辑css和javasrcipt的文件内容 3、将打乱的css文件和javascript文件格式化 4、支持javasrcipt的调试功能 5、设置工作区，将更改的文件保存到本地文件夹中
4)NetWork面板：展示了页面中所有请求内容列表，能查看每项请求的请求行、请求头、请求体、时间线以及网络请求瀑布图等信息。
5）Performance面板：记录和查看Web应用声明周期内的各种事件，并用来在分析过程中一些影响性能的要点。
6）Memory面板：用来查看运行过程中的javascript占用堆内存情况，追踪是否存在内存泄漏的情况等。
7）Application面板：查看WEB应用的数据存储情况。PWA的基础数据：IndexedDB;Web SQL;本地和会话存储；Cookie;应用程序缓存；图像；字体和样式表等。
8）Security面板：显示当前页面一些基础的安全信息
9）Audits面板：会对当前网页进行网络利用情况，网页性能方面的诊断，并给出一些优化建议
10）Layers面板：展示一些渲染过程中的分层的基础信息。