一、背景介绍
一个程序员按照要求编写一个网页，不可能一次编写就完全达到目的，一般要对自己的的代码修改调试几次后才能到达要求，浏览器的F12开发人员工具就可以很方便的帮助程序员调试自己的代码。
二、知识剖析
F12 开发人员工具是一套按需采用的工具，网站开发人员可以随时在任何网页上使用 F12 工具，从而快速调试 JavaScript、HTML 和级联样式表 (CSS)，还可以跟踪并查明网页或网络的性能问题。
注：部分电脑打开F12是需要组合键：Fn+F12；例如：Mac，ThinkPad等
三、常见问题
F12调试CSS样式的主要功能有哪些？
四、解决方案
1、如何更改调试窗口的显示位置
按下F12进入调试
2、如何选中需要修改的元素，如何进行手机端调试
3、如何更直观的观察到页面中设置的盒子模型
4、如何修改当前元素的样式
1、直接在当前元素上添加样式
2、在当前元素对应的class上修改样式
