如何使用浏览器的F12调试页面？

分享人：何阳

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

一、背景介绍

前端程序员在按照UI效果图编辑网页时，不可能一口将全部的代码全部写好，通常情况是编写边调，经过反反复复的调试后才能达到要求的效果，这时候用浏览器的F12开发者工具能形象直观的帮助程序员调试自己的代码，用好F12能显著提高开发者的工作效率，加快调试的速度。

二、知识剖析

F12 开发人员工具是一套按需采用的工具，网站开发人员可以随时在任何网页上使用 F12 工具，从而快速调试 JavaScript、HTML 和级联样式表 (CSS)，还可以跟踪并查明网页或网络的性能问题。

注：部分电脑打开F12是需要组合键：Fn+F12

三、常见问题

F12调试CSS样式的主要功能有哪些？

四、解决方案

1、如何更改调试窗口的显示位置

按下F12进入调试

2、如何选中需要修改的元素，如何进行手机端调试

3、如何更直观的观察到页面中设置的盒子模型

4、如何修改当前元素的样式

1、直接在当前元素上添加样式，或在当前元素对应的class上修改样式

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

6、如何添加新的class、复制和删除原来的class

7、如何快速增加元素样式

谷歌浏览器自带了4个快速增加属性的按钮：text-shadow、box-shadow、color、background-color

五、编码实战

六、拓展思考

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

七、参考文献

八、更多讨论

鸣谢

感谢大家观看

BY : 王振师兄、何阳