1. 背景

通常前端程序员在根据UI效果图编辑网页时，不可能一次性写完所有的代码，通常要边写边调试，经过反复调试才能达到需要的效果。这时候浏览器的F12开发者工具就可以直观的帮助程序员自己调试代码，用好F12可以明显提高开发人员的工作效率，加快调试速度。

2.知识分析

1.F12 开发人员工具是一套按需工具，Web 开发人员可以随时在任何网页上使用它来快速调试 HTML 和层叠样式表 (CSS)，还可以跟踪和查明网页或网络上的性能问题。

注意：某些计算机需要组合键 FN + F12 才能打开 F12。

三、具体做法

1.如何改变调试窗口的显示位置？

按F12进入调试位置

Dosk 端有四个选项：1.拖出开发者工具单框 2.放置在左边 3.放置在底部 4.放置在右边。

一般谷歌浏览器都是默认放在右边的，今天我们主要讲一下谷歌浏览器里的F12开发者工具。

如果要调试模拟手机页面，使用左右布局进行调试会比较方便，如果调试的是PC页面，最好将调试页面放在最下面，这样不会遮挡部分显示的内容。

2.如何选取需要修改的元素？如何在手机端进行调试？

首先打开F12，图片右上角有一个小鼠标箭头图标和一个小电话图标，我们用小鼠标箭头图标点击选中网页上的内容，此时在开发者工具中会显示选中的内容样式，网页上选中的内容可以是一串文字，也可以是一张图片，也可以是一个块级元素。

点击手机小图标，开发者工具会改变页面模式模拟手机浏览，如上图，您可以选择不同品牌、不同分辨率风格的主流手机查看页面，从而观察不同手机不同分辨率下页面的显示效果。

3.如何更直观的观察页面上设置的盒子模型？

我们在 CSS 布局中经常会用到盒子模型，但是如果你点击网页上的某个块级元素进行查看，你会发现管理器工具栏中有一个直观的盒子样式（如上图），你可以直接更改盒子，内容栏的 、、top、、left、 的值都可以直观的修改。

4.如何修改当前元素的样式，或者修改当前元素对应的样式？

①如何修改当前元素？

选择一个元素，开发者工具下会弹出一个窗口，显示当前元素的样式——元素样式。你可以改变选中的样式，这样做的好处是不会影响其他位置相同元素的样式，只会影响当前选中元素的样式，这样会具有更高的优先级。

②如何修改当前元素对应的样式？

我在开发者工具最下方选择的位置就是当前元素类，在这个位置你也可以改变样式，但是修改这个位置的样式的时候需要注意，页面上所有相同元素的样式都会改变，修改一个就会影响到整个body。

5.如何修改元素的伪类属性设置？

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

注意：通常当您单击元素属性时，您无法看到其伪类。

点击伪类之后，可以直接在其上改变样式。

比如颜色，你可以直接从开发者工具里的画板里吸收页面上你想要的颜色，然后确认就可以更改。

当我们在制作网页的时候，UI图上的颜色也可以通过开发人员自己的画板来决定。

6.如何添加新班级、复制和删除原有班级？

过滤栏最右侧有一个.CLS选项，可以添加新的类，该功能主要是添加原有CSS样式中已经存在的类，并通过调用其他类的样式到当前元素来查看新的样式。

.CLS 右边的数字 10 用于复制当前类，在新的类中可以重新编排新的样式。特别是在旧类样式代码很多的情况下，通过增加新的类来重新编排样式非常方便，也省去了复制新类到编码器的很多麻烦。

7.如何快速添加元素的样式？

自带了 4 个按钮可以快速添加属性，如上图 4 个图标所示，从左到右分别是：

文本元素的文本阴影效果

盒子块元素阴影效果

-字体颜色

背景 - 背景颜色

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

当鼠标悬停在分类栏上时，右侧会出现一个由三个小点组成的按钮，点击后就会出现这四个按钮。

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

①将代码从开发者工具类别复制到您的代码编辑器中。

②直接按CTRL+S就可以在页面上另存为。这个方法比较暴力，适合F12修改过比较明显的页面。

③你也可以查看开发者工具，在代码编辑器里输入......

4.思考

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

比如你在开发过程中遇到一些比较难的布局，或者产品经理给你提了一些要求你还没想到一些好的方法来实现，那么你可以参考一下其他网站的设计。

如图，我们可以F12打开源码查看HTML或者CSS样式，借鉴其他网站的代码，了解我们想要实现的布局。

5. 一些常见问题

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

在F12里有一个:HOV的值，点击它并勾选你需要查找的伪类就会显示在下面。

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

F12点击资源，可以看到页面包含的文件，然后找到CSS文件。同样的方法找到JS文件。

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

F12里面有四个按钮，分别是专门用来修改阴影效果、块级元素效果、字体颜色、块级颜色的。

点击需要修改的元素，然后点击元素中的Ť图标，即可即时同步更改字体阴影效果。