Google Chrome浏览器F12调试工具的详解

简介

我们在使用Chrome浏览器调试时用得最多的就是最后四个功能：元素、控制台、源代码、网络。让我们来看下这四个功能的具体作用吧。

详解

元素

元素（Elements）：用于查看或修改 HTML 元素的属性、CSS 属性、监听事件、断点（DOM 断点：在 JavaScript 调试中，我们经常使用到断点调试，其实在 DOM 结构的调试中，我们也可以使用断点方法，这就是 DOM Breakpoint（DOM 断点））

需要查看元素点下图这个箭头

当然也可以使用【Ctrl+Shift+C】进入选择元素模式，然后就可以在页面中选择需要查看的元素了。再从【Elements】一栏中定位到该元素代码具体位置。还可以在右边侧栏【Properties】查看全部的属性

修改元素的代码与属性可以直接【点击右键】需要修改的部分，修改仅对当前页面渲染生效，不会修改服务器源码，作为调试页面效果使用。

控制台

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

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

源代码

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

 网络

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

请求文件的具体介绍：

一共分为四个模块：

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

打开浏览器, 按 F12, 点击 Network, 可以查看相关网络请求信息, 记得是打开 F12 之后再刷新页面才会开始记录的。查看 Network 基本信息, 请求了哪些地址及每个 URL 的网络相关请求信息都可以看的到：URL，响应状态码，响应数据类型，响应数据大小，响应时间

请求 URL 可进行筛选和分类：选择不同分类, 查看请求 URL, 方便查找

也可以直接 Filter 搜索查询相关 URL，可以输入关键字或者正则表达式进行查询

Waterfall 能分割重要的请求耗时, 查看具体请求耗时在哪个地方，鼠标指到相关区域可以看到具体耗时

Queueing 是排队的意思

Stalled 是阻塞  请求访问该 URL 的主机是有并发和连接数限制的, 必须要等之前的执行才能执行之后的, 这段时间的耗时

DNS Lookup 是指域名解析所耗时间

Initial connection 初始化连接时间, 这里一般是 TCP 3 次连接握手时间

SSL https 特有, 是一种协议

Request sent 发送请求所消耗的时间

Waiting 等待响应时间, 这里一般是最耗时的

Content Download 下载内容所需要消耗的时间