Chrome开发者工具Elements/Console/Sources/Network使用总结

在前端项目开发中，chrome浏览器颇受青睐。打开网站，点击F12，即可看到chrome开发者工具。我们可以借助chrome开发者工具进行网页调试，来查看网页html代码、css样式、http请求、运行js等。

开发者工具面板上包含了Elements、Console、Sources、Network、Performance、Memory、Application、Security、Audits面板。

各面板的功能及使用说明如下：

Elements:

查找网页源代码，实时编辑DOM节点和CSS样式，修改的效果会立即显示在浏览器中，极大地方便了前端的调试。

 

Console:

输出开发过程中的日志信息，一般通过js命令行【console.log()】、【console.error()】可以输出日志。

 

Network:

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

Header：列出资源的HTTP头信息，包括请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等。

Preview：预览面板，据你所选择的资源类型（JSON、图片、文本）显示相应的预览。

Response：显示HTTP的Response信息，响应信息面板包含资源还未进行格式处理的内容。

cookie:显示资源HTTP的Request和Response过程中的Cookies信息。

Timing：资源请求的详细信息花费时间。

Sources:

断点调试JS。见https://blog.csdn.net/cyyax/article/details/51242720

Performance：

它的作用就是记录与分析应用程序运行过程中所产生的活动，更多的是用在性能优化方面。

Memory：

堆栈快照、JavaScript函数内存分配、隔离内存泄漏。

Application：

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

Security：

可以去调试网页安全和认证等问题，确保你的网站上实现HTTPS（判断网页安全性）。

Audits ： 

对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。