四个实用但容易忽略的Chrome开发工具特性

xuxueli 发布于2019-08-21 12:07 / 2816人阅读

摘要：开发工具是基于浏览器，帮助开发人员调试代码的控制面板。改变元素状态右击元素，会列出功能选项，其中有一项名为，展开子菜单可以看到几种常见的伪类。当尝试改变元素时，给元素添加的断点便会触发。

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元素时，给元素添加的断点便会触发。

Subtree Modifications，当添加，改变，删除子元素时触发

Attributes Modifications，当元素属性被改变时触发

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开发者工具的强大之处绝不仅此。如果你有推荐的实用功能欢迎在评论分享出来。

原文

云服务器 GPU云服务器忽略css特性实用工具四个节点的服务器 php忽略警告的设置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87451.html

四个实用但容易忽略的Chrome开发工具特性

摘要：开发工具是基于浏览器，帮助开发人员调试代码的控制面板。改变元素状态右击元素，会列出功能选项，其中有一项名为，展开子菜单可以看到几种常见的伪类。当尝试改变元素时，给元素添加的断点便会触发。 Chrome开发工具是基于Chrome浏览器，帮助开发人员调试代码的控制面板。它的功能很丰富以至于我们很难面面俱到，这里就有几个不太明显但很实用的功能。改变DOM元素状态右击DOM元素，会列出...

singerye 2019-08-01 14:35 评论0 收藏0
Vue中你不知道但却很实用的黑科技

摘要：最近数月一直投身于的开源工作中，完成了大大小小多个组件，在组件化开发中积累了不少经验。在开发全局提示组件通知提醒组件对话框组件时，内部都是使用来渲染，但却是来隐式地创建这些实例，这样我们就可以像标题这样使用，但其内部还是通过来管理。最近数月一直投身于 iView 的开源工作中，完成了大大小小 30 多个 UI 组件，在 Vue 组件化开发中积累了不少经验。其中也有很多带有技巧性和黑科...

Heier 2019-08-22 10:47 评论0 收藏0
Vue中你不知道但却很实用的黑科技

摘要：最近数月一直投身于的开源工作中，完成了大大小小多个组件，在组件化开发中积累了不少经验。在开发全局提示组件通知提醒组件对话框组件时，内部都是使用来渲染，但却是来隐式地创建这些实例，这样我们就可以像标题这样使用，但其内部还是通过来管理。最近数月一直投身于 iView 的开源工作中，完成了大大小小 30 多个 UI 组件，在 Vue 组件化开发中积累了不少经验。其中也有很多带有技巧性和黑科...

NicolasHe 2019-08-01 16:03 评论0 收藏0
实用Javascript调试技巧分享

摘要：见过太多同学调试只会用简单的甚至，看着真为他们捉鸡。。下面我就分享一些实用且聪明的调试技巧，希望能让大家调试自己代码的时候更加从容自信。其实提供了文件的搜索功能，只不过大部分时候我们给忽略了。。见过太多同学调试Javascript只会用简单的console.log甚至alert，看着真为他们捉鸡。。因为大多数同学追求优雅而高效地写代码，却忽略了如何优雅而高效地调试代码，不得不说是有点...

jk_v1 2019-08-23 18:06 评论0 收藏0
w3school容易忽略的东西

摘要：和事件可用于处理。循环中的代码块将针对每个属性执行一次。返回值是被找到的值。是被视为节点树的。将新元素作为父元素的最后一个子元素进行添加。返回指定的属性值。把指定属性设置或修改为指定的值。年龄必须是与之间的数字。 JS JS DOM onload 和 onunload 事件会在用户进入或离开页面时被触发。onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网...

shadowbook 2019-08-20 12:07 评论0 收藏0