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

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

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

一、背景介绍

一个程序员按照要求编写一个网页，不可能一次编写就完全达到目的，一般要对自己的的代码修改调试几次后才能到达要求，浏览器的F12开发人员工具就可以很方便的帮助程序员调试自己的代码。

二、知识剖析

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

注：部分电脑打开F12是需要组合键：Fn+F12；例如：Mac，ThinkPad等

三、常见问题

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

四、解决方案

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

按下F12进入调试

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

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

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

1、直接在当前元素上添加样式

2、在当前元素对应的class上修改样式

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

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

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

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

五、编码实战

查看修真院官网

六、拓展思考

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

七、参考文献

参考文献--使用 F12 开发人员工具调试 HTML 和 CSS

Chrome调试工具简单介绍

八、更多讨论

1、怎么保存调试后的代码：

将调试好后的代码复制出来，添加到对应css表中保存

作者：阿布_0caf
链接：https://www.jianshu.com/p/e7be115b4320
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

更多内容，可以加入IT交流群565734203与大家一起讨论交流

这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地