一、Elements用于查看和编辑当前页面中的 HTML 和 CSS 元素。
左边是Html代码区，右边是Styles，Computed，Event Listenser，Dom BreakPoints，Properties
选中一个元素，可以看到该元素在HTML结构中的位置关系
右击鼠标，出现弹窗
styles中，编辑元素样式，可以看到HTML实时更新，
调试时如何禁用Chrome浏览器缓存
1某个页面禁用缓存。
2Chrome默认是有缓存的, 调试的时候,可能需要每次都去获取最新的数据，所以禁用缓存很有必要。 右上角菜单按钮 --> 更多工具 --> 清除浏览数据
3ctrl+F5，强制刷新。
双击空白处，可以添加新的css属性样式，双击css属性可以进行修改。调试窗口和网页分离，调试窗口在右边，调试窗口在下边
显示的是被选元素的样式信息，可以通过双击现有属性来修改该元素的 style 属性或应用的某个选择器中的属性值，也可以通过取消勾选的方式去掉一些属性，同时页面实时变化。
Event Listenser，观察该元素绑定的事件。
添加属性：鼠标双击您所想修改的元素的选择器的空白部分，即可添加属性。添加任何属性都必须以分号结束。你也可以直接点击+号，添加新选择器并进行属性操作。
点击左边代码区的任意位置，ctrl+f可以查找目标内容，如果匹配成功，会在代码区高亮显示。