F12开发者工具调试前端页面

在运行前端html页面的时候，我们都要通过反复的调试才能达到想要的效果，而这时，f12开发者工具就直接帮我们进行调试，明显的提高了我们的调试速度。
1.更改调试窗口的显示位置，通过Dosk side可以选择将开发者工具框放置在左部，右部，底部还是小窗口。

2.进行手机端调试，通过下图的小图标将页面转为手机浏览模式，并在页面顶部有显示不同品牌手机的样式。如下图操作。

3.在CSS布局中我们经常会用到盒子模型，我们可以在盒子模型中修改其中的值，达到我们想要的效果，就不用我们在vscode中一个一个的尝试和修改，直接在盒子中修改更方便了。

4.在Source中可以借鉴一些其他网站的设计，复用到自己的前端页面设计上。

5.在Console中查看代码执行情况。我们可以根据console/alert的输出，来看自己写的这段代码是否执行。输出的结果可以直接在Console中查看。

6.在Element中修改伪类属性，勾选hover选项，就可以看到出现的伪类了，就可以给它修改样式了。

以上就是关于F12的一些使用，后续还有很多等我们发现和使用的地方，希望我们可以用的越来越熟练，和它多多接触。