如何使用浏览器的F12调试页面？
一个程序员按照要求编写一个网页，不可能一次编写就完全达到目的，一般要对自己的的代码修改调试几次后才能到达要求，浏览器的F12开发人员工具就可以很方便的帮助程序员调试自己的代码。
F12 开发人员工具是一套按需采用的工具，网站开发人员可以随时在任何网页上使用 F12 工具，从而快速调试 JavaScript、HTML 和级联样式表 (CSS)，还可以跟踪并查明网页或网络的性能问题。
F12调试页面各个功能分别是什么？

[backcolor=transparent]

[/backcolor]


Elements标签页
Elements标签页的左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性。

[backcolor=transparent]

[/backcolor]


Elements标签页的右侧

[backcolor=transparent]

[/backcolor]


Network标签页
Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示
[backcolor=transparent]

[/backcolor]


Sources标签页
Sources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容。也可以设置各种断点。对存储的内容进行编辑然后保存也会实时的反应到页面上。

[backcolor=transparent]

[/backcolor]


Audits标签页
这个对于优化前端页面、加速网页加载速度很有用;点击run按钮，就可以开始分析页面，分析完了就可以看到分析结果了

[backcolor=transparent]

[/backcolor]


Console标签页
就是Javascript控制台了

[backcolor=transparent]

[/backcolor]


在控制台中可以直接模拟手机、调整UA、修改网络连接状态。

[backcolor=transparent]

[/backcolor]


参考文献
https://link.jianshu.com?t=http%3A%2F%2Fblog.csdn.net%2Fgaoranfighting%2Farticle%2Fdetails%2F51682338">使用 F12 开发人员工具调试 HTML 和 CSS
https://link.jianshu.com?t=http%3A%2F%2Fwww.cnblogs.com%2Fzourong%2Fp%2F5020526.html">Chrome调试工具简单介绍



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