如何使用浏览器的F12开发者工具调试页面？Chrome浏览器使用F12调试代码方法

如图，选中某一个元素，然后在开发者工具的过滤器当中有一个：HOV值点击它，然后选取你需要查找的伪类。

注：因为正常情况下点击一个元素属性，你是看不到它的伪类的。

点击出现伪类后，你就可以在这个上面直接更改样式了。

比如颜色，可以直接在开发者工具中自带的画板中吸取页面中你想要的颜色，然后确定就可以更改了。

咱们在制作网页时，UI图上的颜色也可以拿开发者自带的画板吸取确定颜色。

6，如何添加新的类，复制和删除原来的类？

过滤器栏中最右边有一个.CLS选项，它可以添加新的类，这个功能主要是添加CSS原样式中存在的类，通过调用其它类样式到当前元素中来，从而查看新的样式。

.CLS右边的十号作用是复制当前类，可重新在新类中布置新的样式。特别是在旧类样式代码非常多的情况下重新布局样式，这时候用新增一个类的方法就很方便，新类复制到编码器当中也省不少事。

7，如何快速增加元素的样式？

谷歌浏览器自带了4个快速增加属性的按钮，如图上4个图标，从左到右分别是应：

文本shadow-文本元素阴影效果

箱型shadow-块级元素阴影效果

color-字体颜色

背景color-背景颜色

有人可能会问怎么才能找到它们呢？可能细心的同学已经发现了。

当鼠标悬浮在类栏中，右边会出现一个三个小点的按钮，点击它便会出现这四个按钮了。

最后，页面样式修改完成后，我们就该保存啦。可以有三种方式保存修改后的代码。

①从开发者工具类里面复制代码到你的代码编辑器。

②直接在页面上CTRL + S另存为即可，这种比较暴力，适合F12大幅度修改后的页面。

③也可以对照开发者工具，在WebStorm或VScode代码编辑器中敲上去····

四，思考

1，如何通过F12开发者工具来学习优秀网站的设计？

比如在开发过程中遇到了一些很难的布局，或者产品经理的一些要求你没有想到一些很好的方法来实现的，大家就可以借鉴一下别的网站的设计。

如图上，我们可以打开F12的源来查看HTML或者CSS样式，JavaScript的的的样式。通过借鉴别的网站的代码来参悟自己想要实现的布局。

五。一些常见问题

问题一：如何用F12查询伪类？

在F12中有一个：HOV值，点击它然后勾选你需要查找的伪类就能在底下显示出来了。

问题二：如何用F12查看CSS文件？

点击F12中的资源，就能看见页面中包含的文件，然后找到CSS文件，JS文件的查找也是同样的办法。

问题三：如何使用F12修改文字阴影效果？

在F12中有四个按钮是专门修改阴影效果，块级元素效果，字体颜色，块级颜色的。

点击需要修改的元素，在元素里面点击Ť图标就可以形象的同步更改字体的阴影效果了。

最新评论