火狐浏览器页面元素查看

一、打开

• 使用快捷键：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、复制规则

复制全部：右键全选，选择复制

复制某一条规则：鼠标移到这条规则范围内（或者指向目标的按钮），右键选择复制规则