首先介绍Chrome开发者工具中，调试时使用最多的三个功能页面是：元素（ELements）、控制台（Console）、源代码（Sources），此外还有网络（Network）等。

元素（Elements）：用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。

控制台（Console）：控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。

源代码（Sources）：该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。

网络（Network）：网络页面主要用于查看header等与网络连接相关的信息。

元素 Elements

查看元素属性：可从被定位的源码中查看部分，如class、src，也可在右边的侧栏中查看全部的属性，如下图位置查看

修改元素的代码与属性：可直接双击想要修改的部分，然后就进行修改，或者选中要修改部分后点击右键进行修改，如下图

比如修改标题

控制台 Console

查看JS对象的及其属性

执行JS语句

查看控制台日志：当网页的JS代码中使用了console.log()函数时，该函数输出的日志信息会在控制台中显示。日志信息一般在开发调试时启用，而当正式上线后，一般会将该函数去掉。

源代码 Sources

其主要功能如下介绍

网络 Network

请求文件具体说明

一共分为四个模块：

Header：面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等
Preview：预览面板，用于资源的预览。
Response：响应信息面板包含资源还未进行格式处理的内容
Timing：资源请求的详细信息花费时间

参考文章：
chrome浏览器中 F12 功能的简单介绍
小白玩转浏览器开发者工具—F12（超详细）