我们前端开发者无论是对页面的渲染还是数据交互都离不开浏览器的调试，下面和大家简单的介绍下关于谷歌浏览器检查菜单中的各个项：

1、Elements: document元素，页面最终渲染的HTML代码

2、Console: 控制台，是我们在编辑器使用console.log()方法时打印出的数据渲染的位置，通常控制台我们可以结合断点进行数据调试，比如变量赋值等的一些简单逻辑操作以及测试数据等，笔者在学会使用该功能时不仅在代码书写上得到了简化，开发时间也大大的缩短。当然console控制台还有一个重要的功能是错误信息报错提示，在页面js报错了，我们可以通过控制台快速定位和排查报错并解决问题

3、Source：是指页面来源，页面应用了哪些文件以及文件所在位置，我们通过该选项可以快速查看，通常小编在查找某个文件是都是通过该项进行查找，特别是在JS文件这块，在熟悉某个JS文件代码时，小编不建议通过编辑器看代码，因为编辑器上你只能看到的是代码，并不能看到页面效果更何况页面逻辑执行效果。在浏览器的source项中我们可以在js文件上上下文打断点，并一步步往下执行，结合页面渲染和执行的效果熟悉代码中的业务逻辑，这样不仅能够熟悉代码同时也熟悉了基本的业务逻辑，对页面上的操作也有些印象。

4、Network: 该选项可以说是http请求数据来源，在Network中包含了All、XHR、JS、CSS、Img等选项，通过这些选项我们可以快速的查询页面使用了哪些文件和调用了哪些接口，以及其相应信息和请求时间等

5、Application: 浏览器数据存储位置，项目开发中我们通常将数据存储到浏览器上通常使用的比较多的就是session和local。有有时候也会使用到web SQL存储