本文主要介绍一些本人在此之前不甚了解,但经过了解后又发现对自己的工作很有帮助的一些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
里了,由于不是默认展开的面板,所以我一直都没发现:
关于这个功能,有个比较常用的场景,那就是查看一段文字的字体。