文章目录
- 一、开发者调试工具
- 1、打开开发者调试工具
- 2、设置开发者调试工具显示位置
- 3、开发者调试工具布局说明
- 4、选择元素
- 5、查看手机版样式
- 6、开发者调试工具缩放
- 7、修改数值大小调试
- 8、查看 CSS 样式代码位置
一、开发者调试工具
现有的浏览器基本都提供 开发者调试工具 ;
1、打开开发者调试工具
在浏览器中 , 按下 F12 键 , 即可打开 开发者调试工具 ;
在网页中 , 右键菜单中 , 选择 " 审查元素 " 也可打开调试工具 ;
2、设置开发者调试工具显示位置
右上角的 三个点 按钮中 , 可以设置 调试工具的 位置 ;
3、开发者调试工具布局说明
在调试工具中 , 左侧是 HTML 结构 , 右侧是 CSS 样式 ;
4、选择元素
点击左上角的 选择工具 , 可以在页面选择想要查看的元素 ;
选中标题后的效果 ;
5、查看手机版样式
点击左上角 第二个按钮 " 切换设备仿真 " , 可以查看手机版页面样式 ;
6、开发者调试工具缩放
按住 Ctrl 键 , 可以使用滚轮放大缩小 开发者调试工具 ;
7、修改数值大小调试
选中字体数值后 , 使用鼠标滚轮 , 或者 上下按键 , 可以修改 数值大小 , 进行调试 ;
刷新后 , 数值恢复到原来的值 , 调试不会真正修改源代码 ;
8、查看 CSS 样式代码位置
在 开发者调试工具中 右侧的 CSS 样式中 , 右侧 每个 CSS 样式 都 可以查看 样式的代码位置 ;
