一，背景介绍
通常，前端程序员在按照UI效果图编辑网页时，不能一次写完所有代码。 通常，可以在编写的同时进行调整，重复调试后才能达到所要求的效果。 此时，使用Chrome浏览器的F12开发人员工具，程序员可以直观地调试自己的代码，使用好的F12可以大大提高开发人员的工作效率，缩短调试时间。
二，知识剖析
1，F12开发人员工具是一套按需工具，站点开发人员可以随时在任何页面上使用F12工具。 因此，在快速调试的JavaScript中，还可以使用HTML和级联样式表(CSS )来跟踪和识别网页和网络性能问题。
注：某些电脑需要按键组合才能打开F12。 FN F12。
三，具体实操
1，如何更改调试窗口的显示位置？
按F12进入调试位置
Dosk side有四种选择。 1。 拖动开发人员工具单框2 .放置左侧3 .放置底部4 .放置右侧。
默认情况下，谷歌浏览器位于右边，但今天我们主要讨论谷歌浏览器中的F12开发人员工具。
在创建模拟手机端调试页面时，在左右布局中调试很有用，但在调试PC端页面时，将调试页面放在下端可以避免隐藏显示内容。
2，如何选中需要修改的元素？如何进行手机端的调试？
首先打开F12，图的右上角有一个小鼠标箭头图标和一个小手机图标。 使用小鼠标箭头图标单击并选择网页中的内容后，所选内容的样式将显示在开发人员工具中。 网页中的内容可以是一系列字符、图像或块级元素。
点击小手机图标，开发者工具将页面模式更改为模拟手机浏览的状态。 在上图中，您可以选择市场上主流不同品牌的手机和不同分辨率的样式来显示页面，并观察页面在手机不同分辨率下的显示效果。
3，如何更直观的观察到页面中设置的盒子模型？
在CSS布局中经常使用框模型，但在网页中单击任意块级别的元素进行审查。 管理员工具栏中有直观的盒子样式。 可以直接直观地更改. margin、填充、边框和内容栏的上下左右值。
4，如何修改设置当前元素的样式，或在当前元素对应的类上修改样式？
如何修改当前要素？
选择元素后，当前元素样式“元素样式”将弹出在开发人员工具下。 可以在此选择样式下更改。 这样做不会影响其他位于相同位置的元素的样式，而只会影响当前选定元素的样式。 这个优先顺序更高。
如何在与当前元素对应的类中更改样式？
在“开发人员”工具底部的我的框中选择的位置是当前元素类，您也可以在此位置更改样式。 但是，要在此位置更改样式，请注意页面上所有相同元素的样式都会发生变化。 担心的话全身会动。
5，如何修改元素设置的伪类属性？
如图所示，选择元素，单击开发人员工具过滤器中的HOV值(如果有)，然后选择要搜索的伪类。
注意：因为通常单击元素属性时，将看不到该伪类。
显示伪类后，可以直接将其样式更改为。
例如，可以直接从开发人员工具附带的画板中吸收页面上所需的颜色，然后在确定后进行更改。
我们制作网页时，UI图的颜色也可以用开发人员拥有的画板来决定颜色。
6，如何添加新的类，复制和删除原来的类？
过滤器栏的右端有. CLS选项，可以添加新类。 此功能主要通过添加存在于CSS原始样式中的类并为当前元素调用其他类样式来显示新样式。
. CLS右侧的第10个角色是复制当前类，并将新样式重新定位到新类中。 特别是在老类的样式代码非常多的情况下，重新布局样式。 此时，添加新类的方法很有用。 也省去了将新类复制到编码器的麻烦。
7，如何快速增加元素的样式？
谷歌浏览器提供了四个用于快速添加属性的按钮，如上面的四个图标。 从左向右，分别如下。
文本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中有四个按钮是专门修改阴影效果，块级元素效果，字体颜色，块级颜色的。
点击需要修改的元素，在元素里面点击Ť图标就可以形象的同步更改字体的阴影效果了。