高性能网站优化——调试

接下来我们先简要介绍一下Chrome调试工具各个工具的作用。

Elements

Elements板块你可以看到整个页面的Dom结构。你可以在这里编辑HTML,查看元素CSS,查找元素等等。

Network

这个板块，你可以查看页面所加载的所有资源响应情况，响应时间，浏览器等待时间，状态码，MINE Type,资源大小等。

Sources

Sources就是所有资源了，你可以看到页面加载的资源，图片，css,js等，它们会按照资源的来源分类。

Timeline

跟前面的工具相比，Timeline就高级很多了。它可以让你查看浏览器的渲染流程。解析代码,布局，绘制，合并渲染层

Profiles

Profiles工具主要是用来检测CPU占用程度，堆栈申请的内存。

Resources

Resources工具显示资源的，跟Sources不同的是，它会对文档类型分类。并且它可以查看，增加，删除，修改页面LocalStorage，SessionStorage,Cookies等等。

Audits

Audits工具非常智能，它会告诉你如何优化页面，告诉你应该合并CSS,JS，应该明确图片的大小，以及某个css文件中unused CSS的百分比等。

Console

Console应该都很熟悉了吧？经常会以为少写了’}’而报语法错误。当然它的功能远不止这些

奇淫技

 

• 可以保存修改，Source面板下的文件是可以修改并且支持版本回退的。打开一个文件，进行编辑，保存。右键打开Local Modifications,你可以看到保存记录，你可以选择回退，到某个时间点。你也可以另存为~
  
  
• css选择器，Elements工具中的选择器，支持css选择器
• jQuery语法，Console工具支持jQuery语法
• 查看使用字体，Elements工具右侧css模块，最底部可以看到某个元素最终具体使用的字体。
• Add Folder to Workspace，在Source面板下，右键选择Add Folder to Workspace，之后就可以直接编辑该目录下的任何文件。
• Source下的Snippets，可以让你想保存小段的脚本、书签或是你在浏览器中调试时经常用到的代码，都可以使用Snippets，你可以在Source面板里创建、存储和运行这些Snippets

• $0,$_ 打印，Element面板选中标签

  在Console面板，可以使用$0或者$_快速将它打印出来
  

• Console更多功能,Console面板还有很多功能，比如console.error,console.group,console.time
  

       console.group合并输出