一、打开
- 使用快捷键:Ctrl + Shift + C
- Web开发者工具 – 查看器
二、选择元素
右键单击网页上的一个元素,并选择“查看元素”
点击开发者工具的左上角的图标:选取页面中的元素
使用方向键来改变当前选中的元素:
- 上:当前元素的上一个元素
- 下:当前元素的下一个元素
- 左:高亮当前元素的父级
- 右:高亮当前元素的子级,如果没有子级则就轮到同级, 如果没有同级就轮到下一个节点。
当一个元素及其父级占据了屏幕同一个空间的情况下,只使用鼠标很难选中其中一个元素,这个功能就特别有用了。
三、查看和编辑HTML
1、搜索
- 点击搜索框,输入你想寻找的类型按“Enter”,页面中的第一个元素类型将被选中。
- 再按“Enter”查找下一个。
2、html树
每个箭头表示一个节点:单击箭头来展开节点。如果你按住Alt键单击箭头,会一次性展开下面的所有节点。
3、右键菜单
在一个特定节点使用右键弹出菜单执行某些常见的任务。(编辑,复制,粘贴,控制状态)
4、编辑html
- 直接在HTML面板编辑HTML标签、属性和内容:双击要编辑的文本,修改它,按Enter键立即看到更改效果。
- 使用右键菜单,选择“编辑HTML”,在文本框中进行编辑
- 点击并按住任何元素,然后将其拖在树的上或下,当您释放鼠标按钮时,该元素将被插入相应的位置。
四、查看和编辑CSS
列出作用于当前元素的所有规则
1、规则显示
规则的声明,每条规则包含的样式列表:属性、值
- 选择器旁边的图标是一个指向目标的按钮:单击按钮在页面上突出显示匹配这个选择器的所有节点。
- 被划掉的声明是被后面的规则所覆盖的。
- 鼠标悬停在一个声明上,,旁边会出现一个复选框,你可以用它来切换或关闭声明。
- 右侧链接到一个规则
2、过滤规则
- 不包含键入字符串的所有规则都被隐藏
- 其中包含了键入字符串的任何声明都被强调
3、切换伪类
点击“ :hov ”图标,对所选元素切换伪类 :hover, :active, :focus
4、链接到css文件
在每一个规则的右上方会有显示:源文件名和行号,并附有链接,点击后在样式编辑器中打开该文件。
5、查看计算后CSS
- 切换到”计算后“视图。这里显示选定元素的每个CSS属性计算后的值
- 在检索框中键入关键字可以进行列表的实时过滤
6、添加和编辑规则
- 如果你点击一个声明或规则,你可以对其进行编辑和查看,并立即看到结果。
- 点击搜索框后的加号图标
- 要添加一个新的声明到规则中,则点击规则的最后一行(右括号占据行)
在编辑模式下您可以使用箭头键来增大/减小规则数字
- 按一下向上箭头会由“1px”变成”2px“,
- Shift +向上/向下将以10为最小单位改变,
- Alt +向上/向下变化值为0.1,
- shift+Page up/down 变化值为100。
7、复制规则
复制全部:右键全选,选择复制
复制某一条规则:鼠标移到这条规则范围内(或者指向目标的按钮),右键选择复制规则