chrome开发者工具功能拾遗：Elements面板篇

本文主要介绍一些本人在此之前不甚了解，但经过了解后又发现对自己的工作很有帮助的一些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里了，由于不是默认展开的面板，所以我一直都没发现：

关于这个功能，有个比较常用的场景，那就是查看一段文字的字体。