chrome开发工具特性

1. Chrome开发工具是基于Chrome浏览器，帮助开发人员调试代码的控制面板。它的功能很丰富以至于我们很难面面俱到，这里就有几个不太明显但很实用的功能。

   改变DOM元素状态

   右击DOM元素，会列出功能选项，其中有一项名为'Force Element State'，展开子菜单可以看到几种常见的伪类：:active,:hover, :focus, and :visited。

   

   如果在你的CSS或JS中想要调试这些伪类效果，就可以使用这个功能。

   DOM断点

   我们熟悉JS的断点调试，但很少有人知道DOM也可以断点调试！依然右击DOM元素，可以看到一个名为Break on的选项，展开有Subtree Modifications，Attributes Modifications以及Node Removal三个选项。

   

   当JS尝试改变DOM元素时，给元素添加的断点便会触发。

   1. Subtree Modifications，当添加，改变，删除子元素时触发
   2. Attributes Modifications，当元素属性被改变时触发
   3. Node Removal，当移除元素时触发

   Console API

   我们最为熟悉的一定是console.log，但console的方法远远不止这一个，有兴趣的可以看看官方文档。这里再讲一个很实用的方法——console.count，它可以统计代码块执行的次数，如果你怀疑一个函数是不是被执行了很多次，用它就可以很轻松的统计出来。

   function login(user) {
       console.count("Login called");
       // login() code...
   }
   

   这样，每次调用login时都会在控制台打印出次数

   

   Audits

   Audits可以检查页面的性能方面存在的问题，并给出优化意见，比如CSS和JS的引入位置，是否开启了Gzip压缩，是否很好地利用了浏览器缓存以及没有应用到的CSS规则等，是不是很智能很强大呢？

   

   好了，看了这四个，也许你会开眼界，也许会觉得小儿科，但chrome开发者工具的强大之处绝不仅此。如果你有推荐的实用功能欢迎在评论分享出来。

2. 原文