本文主要介绍一些本人在此之前不甚了解,但经过了解后又发现对自己的工作很有帮助的一些chrome开发者工具调试技巧/功能。也借这篇文章提醒一下自己,在实际项目中多使用这些功能,尽快熟悉起来,提升自己的工作效率。


给DOM设置断点

这里写图片描述
Elements面板,右键选中想要监听的DOM节点弹出菜单,鼠标停在Break on……,这时候就会出现子菜单,子菜单有三个选项:

  • Subtree modifications,在该DOM结点及其子结点的结构有变动时中断。

  • Attributes modifications,在该DOM结点(不包括其子结点)的属性有所变化时中断。

  • node removal,在该DOM结点被移除出DOM树时中断。

结合我自己调试的经验,Attributes modifications可以用在找出某个属性或者class是由哪段代码添加或修改的,尤其是在修改JS插件时非常省事;node removal,我琢磨着估计是查bug用的吧,某个还有用的DOM结点不知怎么着就被删掉了;Subtree modifications我没有想到特别贴切的场景,估摸着大概是用来一步步缩小调试范围的?


查看DOM节点的最终CSS

一个DOM节点最终的CSS可能会被很多段CSS代码所影响,例如在Elements - Styles里就列出了所有对目标DOM节点有影响的CSS代码:
这里写图片描述
可是这样一个一个来看,实在是很烦,据我所知,IE 8就有总结出最终CSS的功能,那chrome有没有呢?chrome也是有的,藏在Elements - Computed里了,由于不是默认展开的面板,所以我一直都没发现:
这里写图片描述
关于这个功能,有个比较常用的场景,那就是查看一段文字的字体。


array_huang
10.4k 声望6.6k 粉丝