火狐浏览器页面元素查看

一、打开

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

复制全部:右键全选,选择复制

复制某一条规则:鼠标移到这条规则范围内(或者指向目标的按钮),右键选择复制规则

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值