spacewander
chrome devtool 技巧 之 elements
Elements可能是大家见过次数最大的面板了，因为每次审查元素都会打开它。 所以这一次来讲讲Elements面板中可用的小技巧。
Elements面板可以分成两块，左边的显示html源码，右边的显示各种相关的属性，默认是显示对应dom元素的style。
那么先从左边开始：
html源码框
右键菜单，你能看到许多有用的选项。复制、将选择的dom元素置于某种状态什么的不说了。有一个“Scroll into view”选项，可以将页面滚动到鼠标所在/选中的DOM节点上。还有一个“Break on”，弹出子菜单中可以选择断点类型。可以选择DOM元素发生何种变化时会触发一个断点。该断点一旦被触发，就会跳转到Source面板中，进入debug模式。具体有哪些类型，菜单上已经写得一目了然了，这里不再赘述。
style框
看完左边的html源码框，让我们出门右转进入右边的style框。这个框显示的是选中的dom节点的具体css style。自上而下，分别是不同的css规则，按优先级先后排列。
一个重要的技巧是，如果你点击css右上角的url链接，就能跳转到Source面板中对应的文件。在这里Ctrl+s能够保存对css文件的修改。这意味着，如果在调试的过程中对css规则做了较大的修改，不需要跑到各个css规则中复制修改到源文件中，只需要跳到对应的Source面板下的css源文件中进行保存就行了。
还有一个有趣的地方，在颜色选择器中Shift+click，会改变颜色的表示方式，比如从#FFFFFF变为rgb(255,255,255)。对于强迫症患者，这个倒是个不错的功能呢。
Compute框
在Style框中查看DOM元素属性时，有时候会发现自己想要查明的属性值，居然要拉到最底下才看到，原来是被XX规则设定成这样了。
其实切换到隔壁Compute框就不用那么辛苦了。
Compute框中显示的是选中元素计算出来的最终属性。勾上Show inherited properties并配合Filter一起使用，生活一下子轻松了很多。
Event Listener框
如其名。这个框显示的是相关的event listeners。展开对应的event listener，可以看到若干个属性，其中有isAttribute，显示是否是通过DOM属性（如on系列）来设置的；还有useCapture，显示该addEventListener调用中设置的useCapture 值。其他还有别的什么属性，因为没有用到过，所以我直接忽略掉好了。
当然最重要的是右上角的url，点开它直达对应的源码片段。
有一个问题是，该框中默认显示所有的event listeners。好在在框的最上方有一个漏斗，点击下可以选择“Selected Node Only”，就只显示当前选中元素的event listeners。这在调试中用处非常大，是不是顿时感觉生活轻松多了呢？
下期预告：接下来我会写点chrome devtool中关于network（请求，响应）和profile之类的小技巧。
