七、Chrome调试工具

166 阅读1分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

 Chrome浏览器提供了一个非常好用的调试工具,可以用来调试我们的HTML结构和CSS样式。本节介绍调试工具的使用过程。

一、打开调试工具

打开Chrome浏览器,按下F12或者右击页面空白处——》检查。打开如下所示界面

 二、使用调试工具

1、Ctrl+滚轮可以放大开发者工具代码大小

2、左边是HTML元素结构,右边是CSS样式

3、右边CSS样式可以改动数值(上下左右箭头或者直接输入)和查看颜色

不会真正的改变自己的代码,只能实时查看效果。

4、Ctrl+0复原浏览器大小

5、如果点击元素,发现右侧没有样式引入,极有可能是类名或者样式引入错误

6、如果有样式,但是样式前面有黄色叹号提示,则是样式属性书写错误