本文介绍了如何使用谷歌浏览器的F12调试功能进行网页开发问题的排查与修复。通过Elements区域查看和编辑HTML结构及CSS样式，Console区域检查错误信息，Sources区域查看资源文件，Network区域监控HTTP请求，以及Application区域管理Cookie等对象，帮助开发者高效地进行网页调试。
做过网页开发的都知道，不过你是用php还是asp.net以及java开发的网站，在开发过程中，web网页展示页面肯定会出现或多或少的问题。这里我推荐使用谷歌浏览器进行Web网页的调试以及错误信息定位。
使用谷歌浏览器调试网页，一般无需另外下载浏览器插件，使用谷歌浏览器自带的F12调试功能即可完成大部分的调试工作。
首先，我们打开对应的网页，在谷歌浏览界面按下键盘的功能区域的F12键，即可调出调试界面，调取出来的调试面板如下所示：
下面来讲解上图中标注的几个关键点的区域：
一、Elements区域：此区域主要展示网页的Html文档结构，涉及到的HTML文档的Dom结构信息、引用的JS和Css文件。
此区域范围的Html结构支持用户调试编辑，用户可以选中Html文档中的某一个文档结构，如div或者table等进行编辑，编辑后的效果将立马在网页中呈现出来。
同时此区域也支持定位Dom结构对应的Css样式表，支持编辑调整样式。
针对网页上展示的某个区域块，我们也可以通过定位工具，快速的查看到该结构对应的HTML结构信息。
下面以百度首页为例，首页图如下：
最低0.47元/天 解锁文章
218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
