做web开发的经常会用到谷歌浏览器的调试功能，当然也有人是用火狐的，但是感觉用谷歌的人还是多一点。但是谷歌的调试按钮简介甚少。所以写下此篇文章，作为自己的笔记。
按F12就可以调出谷歌浏览器的调试窗口。
右边上面的那三个点是调试窗口的设置按钮，点击会出现几个设置，第一行便是设置调试窗口所在的位置，可以将调试窗口设置成一个独立的浏览器窗口，也可以设置在浏览器的右边，当然默认是在浏览器的下方，相信这个也是很多人的习惯，屏幕大的电脑估计放在哪里都好看，o(╯□╰)o
然后看看调试窗口的第一个菜单----Elements。
这个菜单的功能就是可以方便的查看网页的源代码，而且可以对应着网页的某一个部分来看源代码。不过现在很多动态网页的情况下，这个功能也是作用不是很重要。
这个是调试窗口的第二个菜单---console
这个窗口对于web开发的同志们，应该是很常用的。在这里可以输出console命令来查看元素的值，也可以查看源代码的日志打印。是查错调试的好地方。
第三个菜单-----source
在这里可以打开网页的源文件，在这里用的比较多的应该是打开js文件打断点调试了，左上角的框是当前文件的名字，左下角的框是断点的位置，右下角的框则是断点的信息。
右上角的框是调试js代码的按钮。这个框下面还有一个watch小菜单，可以查看某个变量的值，和eclipse里面调试java的功能很类似O(∩_∩)O~。
第四个菜单----Network
web开发重头戏的一个菜单，在这里可以看到浏览器和服务器的交互吧，不知道这样说对不对。在这里可以看到前台向后台的请求，以及后台返回的数据。
首选第一个框里面的按钮是停止使用这个Network的功能，居然还有这个按钮...o(╯□╰)o按了这个菜单就没反应了。
第二个是清空目前的请求，当你只需要某一个请求的信息的时候，在页面点击之前，点击这个按钮，就可以清空之前的请求，以免过多无用的信息打扰到你的判断。
第三个是一个有趣的功能，可以让你知道页面从空白到填充满内容的过程，是以时间为轴，可以看下面的2个图
这里看出来了当时间到了1.41秒的时候，页面右边的新的内容加载了出来了。所以你应该知道在1.38秒到1.41秒，这里面发生了什么。从而也可以去查找这段时间的请求。
好了，我们再看第四个红框的按钮。
这里的按钮是控制过滤器的开关，开启后可以在左边的空格处输入你想要查找的请求的名字,例如下图，当输入uid 的时候，这里会过滤掉其他请求，只留下请求名字和路径中包含uid字段的请求。
接下来到第五个框里面的按钮，这个按钮是控制请求的信息的开关。打开则可以查看到请求的路径或其他信息，关闭则简单的出现请求的名字。如以下2个图
关闭时
打开时
接下来到了第6个框，第六个框是控制查看某一个时间段的请求，可以和之前的第三个框内的按钮配合使用。
点击开启后，可以选择某一个时间段的请求查看。这个功能楼主我也用的比较少，若过路高手知道其中更多技巧，可留言相告哈~~~
这个network菜单就先写到这里吧。没想到调试窗口一写起来这么多内容可以介绍。我认为要多了解这个工具，调试才可以事半功倍，不然有些好的功能都隐藏在这里，你一直用，而不去探索，那也是很可惜。其他窗口的介绍等我再熟悉熟悉，再来介绍。
还是那句话，有什么可以交流的，尽管留言吧！