第一次在掘金上写博文，本文主要是在工作中，我经常使用的一些Chrome Dev-Tool调试技巧，当做随笔记录一下，如果能帮到各位看官，自然是极好的。由于功能强大，所以我分开几期来写。希望大家多多支持。
关于Element，大家一定经常都在使用，但是有一些细节，大家可能没有注意到，但是这些可以帮你更快的定位一些奇怪的问题或者更快的编写样式。第一章操作较少，所以包含大量图片。
样式技巧：
在最上面的输入框也可以对样式进行过滤。
当鼠标浮动到高亮处，会出现下图所示内容。
分别是text-shadow，box-shadow, add-color，add-background-color。 可以快速添加文字阴影, 边框阴影，颜色和背景颜色。
如下图所示：
你可以查看伪类，添加类，添加一个style，长按加号会出现样式表添加。
你可以点击色块，调出调色板。
还可以使用Chrome自带的取色器。
按住shift点击颜色方块，还能对颜色进行格式化。
鼠标浮动到类名上你可以高亮正在使用该类的元素。如下图所示：
右键元素，你可以解锁许多新功能。
挑选几个常用的功能：
- Copy -> Copy Element 可以拷贝元素html代码
- Copy -> Copy xPath 可以拷贝元素xPath（selenium, 爬虫等中应用较多）
- Force state -> :hover, :active, :foucs, :visited, :foucs-within 强制元素保持在hover或者其他状态
- Break on -> subtree modification 该元素下子元素增加或删除时，会定位到对应的source下，操作该元素的脚本中。
- Break on -> attribute modification 节点属性发生变化。
- Break on -> node removal 节点被删除时, 会暂停执行脚本。
- Store as global variable 将该节点存储为全局变量。
比较少用的一些tab：
- Computed 可以很好的观察盒子模型，查看宽高等属性，也能做属性过滤。
- Event Listeners 可以很好的观察选中元素已经绑定的事件，你可以选择性的删除。
- DOM Breakpoints 可以查看断点，可以参考Break on -> subtree modification部分。
- Properties 该元素的所有属性，可以理解成console.dir()。
留个作业，大家猜猜Accessibility的作用。
