【CSS】开发者调试工具 ( 打开工具 | 设置工具显示位置 | 选择元素 | 查看手机版样式 | 开发者调试工具缩放 | 修改数值大小调试 | 查看 CSS 样式代码位置 )

文章目录

• 一、开发者调试工具
• • 1、打开开发者调试工具
  • 2、设置开发者调试工具显示位置
  • 3、开发者调试工具布局说明
  • 4、选择元素
  • 5、查看手机版样式
  • 6、开发者调试工具缩放
  • 7、修改数值大小调试
  • 8、查看 CSS 样式代码位置

一、开发者调试工具

现有的浏览器基本都提供 开发者调试工具 ;

1、打开开发者调试工具

在浏览器中 , 按下 F12 键 , 即可打开 开发者调试工具 ;

在这里插入图片描述

在网页中 , 右键菜单中 , 选择 " 审查元素 " 也可打开调试工具 ;

在这里插入图片描述

2、设置开发者调试工具显示位置

右上角的 三个点 按钮中 , 可以设置 调试工具的 位置 ;

在这里插入图片描述

3、开发者调试工具布局说明

在调试工具中 , 左侧是 HTML 结构 , 右侧是 CSS 样式 ;

在这里插入图片描述

4、选择元素

点击左上角的 选择工具 , 可以在页面选择想要查看的元素 ;

在这里插入图片描述

选中标题后的效果 ;

在这里插入图片描述

5、查看手机版样式

点击左上角 第二个按钮 " 切换设备仿真 " , 可以查看手机版页面样式 ;

在这里插入图片描述

在这里插入图片描述

6、开发者调试工具缩放

按住 Ctrl 键 , 可以使用滚轮放大缩小 开发者调试工具 ;

在这里插入图片描述

7、修改数值大小调试

选中字体数值后 , 使用鼠标滚轮 , 或者 上下按键 , 可以修改 数值大小 , 进行调试 ;

刷新后 , 数值恢复到原来的值 , 调试不会真正修改源代码 ;

在这里插入图片描述

8、查看 CSS 样式代码位置

在 开发者调试工具中 右侧的 CSS 样式中 , 右侧 每个 CSS 样式 都 可以查看 样式的代码位置 ;

在这里插入图片描述