如何使用浏览器的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表中保存


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 如何使用浏览器的F12调试页面? 一个程序员按照要求编写一个网页,不可能一次编写就完全达到目的,一般要对自己的的代...
    小翼_b998阅读 34,956评论 0 7
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,595评论 25 708
  • 又回到最初的起点,记忆中你青涩的脸,我们终于来到了这一天。 “不!” 一个字,结束了我们...
    君岐阅读 472评论 0 0
  • 昨日与一个美女闲聊一小时,颇有感触。 这位美女有多美呢,作为外貌协会天秤座的我,也觉得她的美是值得围观的。 18岁...
    梅凉阅读 683评论 27 11
  • 《丰田生产方式》,21页 你对于一种现象连续问5个“为什么”了吗?这样做,说来容易,做起来就难了!比如,一台机器不...
    幸福虚度的野人阅读 314评论 0 0