页面上的任意元素,在其上面右键,选择“Inspect"css
在Elements面板上,用鼠标手动选择某个DOM节点html
点击审查元素按钮,而后去页面上选择DOM前端
在console里面使用inspect(dom)
查看某一元素segmentfault
使用鼠标 >>>
1.在DOM节点上单击一次,高亮此节点
2.展开一个节点:在节点上的任意处双击或者单击左边的箭头
3.收起一个节点:点击左边的箭头浏览器
使用键盘 >>>
1.向上箭头选择此节点以前的一个节点(在Elements面板内可见的节点,有多是父节点、兄弟节点、或者兄弟节点的子节点等)
2.向下箭头选择此节点以后的一个节点(同上)
3.向右箭头能够展开一个节点,再次按向右箭头会选择到这个展开节点的第一个子元素,依此论推
4.向左箭头能够收起一个节点,再次按向左箭头会选择到这个收起节点的父元素,依此论推dom
在Elements面板的最下方是一个面包屑路径,当前选中的节点以蓝色高亮表示,蓝色高亮节点的左侧是它的父节点,右侧是其子节点。字体
在节点名字或属性的上方直接双击spa
选择一个节点,按Enter
键,而后(重复)按Tab
键,去选择节点名字或者属性设计
右键选择“增长属性”或者“编辑属性”调试
当修改节点名字的时候,完成时,其对应的闭合标签会自动更新
有时候涉及到编辑的内容较多时,能够右键选择以html文本的形式编辑,方便、简洁。
单击节点不放,而后直接拖动便可
在节点上面右键,选择“删除元素”
咱们在Elements面板选择一个元素时,这个元素可能并不在当前视窗内,此时,右键选择“Scroll Into View”就能自动定位到这个节点了,至关于锚点的效果。
Settings > Preferences > Elements > Show HTML comments
为了查看更多操做,咱们通常都是右键,实际上还有另外一个入口。在当前选择的节点上,最左侧有三个点,点击这三个点,就能达到鼠标右键的效果。
关于DOM还有其余操做,如在DOM上设置断点、监听DOM上绑定的事件等,这些我把它归到js调试的内容中去了,有兴趣的能够查看下一篇《Chrome DevTools - JS调试》
选择一个元素,Styles窗口显示着全部这个元素上的样式,优先级从高到低:
最上面是:element.style
,这些是直接写在HTML中的行内样式或者是在console中动态设置的
其次是直接匹配这个元素的css
而后是一些继承的css,有从父元素继承过来的,也有从浏览器默认样式中继承的
上图中:
1.元素的样式所对应的选择器
2.浏览器默认的样式,一般会被覆盖
3.被覆盖的样式会有一个删除线
4.继承的样式会被显示在一个个的组里面,其头部为Inherited from <NODE>
5.灰色的样式表示未定义,可是在运行的时候会去计算相应的值
在Styles面板中,把鼠标悬停在选择器上,就能看到此选择器对应的css应用在了哪些元素上面。
点击.cls
按钮,能够查看到加在当前元素上的全部类名,也能够在输入框中增长一个新的类名(输入完,按Enter
键)
在属性名或者属性值上点击便可进入编辑状态,当某个属性名或属性值高亮时,按Tab
键能够选择后面的属性名、属性值、选择器,或者新加属性,Shift + Tab
反向。
当一个属性值是与数字相关的时候,有一些快捷键:
上下方向键,±1
Alt
+ 上下方向键,±0.1
Shift
+ 上下方向键,±10
Shift + Page Up/Page Down
(Windows、Linux)或者Shift + Function + Up/Down
(Mac),±100
在css规则可编辑区域的空白处,单击便可以建立一条css声明。
单击按钮,便可新增一条样式规则。单击此按钮不松,能够选择在哪一个样式表中新增css规则。
Elements面板中,在节点上右键选择伪类
在Styles窗口内,点击:hov
按钮,在复选框中选择
当鼠标悬浮在某个样式规则上,右下角会有一个“三个点”的按钮,鼠标移动到此按钮上,能够看到几种不一样的图标,能够快捷地为元素添加不一样的样式。
在某些状况下用颜色拾取器去查看某些颜色值仍是很方便的,可是通常状况下,页面上的颜色值UI已经标注好,前端不须要本身再去设计,直接修改更为方便,此部份内容不在阐述。
Shift
+ 单击能够改变颜色值的格式,如rgb、十六进制等。