人人都能掌握的Chrome使用技巧

Google Chrome是一款由Google公司开发的网页浏览器，是程序员们开发前端的必备利器。掌握一定的Chrome调试方法可以快速排查和定位问题，大幅度提高开发效率。下面就由小编来介绍一下Chrome调试时会使用的功能。

1.了解面板

图一 Chrome功能面板

Elements：元素面板

Console：控制台面板

Source: 源代码面板

Audits：审计面板

Network: 网络面板

Performance: 性能面板

Memory: 内存面板

Application: 应用面板

Security：安全面板

Audits: 审计面板

2.常用面板具体使用技巧

2.1 Network面板

Network面板可以看到所有的资源请求，包括网络请求，图片资源，html，css，js文件等请求，可以根据需求筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看。

图二 Network面板基本功能介绍

图三 Network模拟网络延迟功能介绍

图四 Network单个请求响应详情查看

如图四点击单个URL请求，可以查看的请求的具体详情信息，请求详情中包含以下多个部分:

(1) Headers：用来查看具体的请求URL、请求头及请求体的相关参数信息

(2) Response：查看服务端返回的数据信息

(3) Preview：Preview是将Response中的数据进行格式化输出

(4) Timing：是对请求及相应时间的具体展示，其每个功能字段功能描述

图五 Timing包含的字段功能描述

Queuing： 排队的时间花费。可能由于该请求被渲染引擎认为是优先级比较低的资源（图片）、服务器不可用、超过浏览器的并发请求的最大连接数（Chrome的最大并发连接数为6）；

Stalled： 从HTTP连接建⽴到请求能够被发出送出去(真正传输数据)之间的时间花费。包含用于处理代理的时间，如果有已经建立好的连接，这个时间还包括等待已建立连接被复用的时间；

Request sent： 发起请求的时间；

Waiting： (Time to first byte (TTFB)) 是最初的网络请求被发起到从服务器接收到第一个字节这段时间，它包含了TCP连接时间，发送HTTP请求时间和获得响应消息第一个字节的时间。

Content Download： 获取Response响应数据的时间花费。

(5) Cookies

图六 Cookie包含的字段功能描述

Name：cookie的名称

Value：cookie的值

Domain: cookie所属的域名

Path: cookie所属的URL

Expires: cookie存活的时间

Size: cookie的字节大小

HttpOnly: 表示cookie只能被浏览器设置,JS不能修改

Secure: 表示cookie只能在安全连接上传输

2.2 Source面板

Source面板的主要功能是断点调试，在js代码中写debugger会自动断点到该位置。

图七 断点调试面板

在该面板的监视变量上侧有继续运行、单步跳过等按钮，可以在当前断点后，逐行运行代码，或者直接让其继续运行，具体如下:

图八 断点的相关操作按钮

2.3 Elements面板

Elements面板是查看页面元素的面板,页面上使用的元素、元素样式、元素绑定的事件及元素绑定的属性都可以查看。

（1）Style

CSS的预处理器，直接更改CSS样式在界面中可以直观的看到效果。点击具体位置之后，可以跳转到属性文件具体位置。

图九 Style功能介绍

（2）Event Listeners

查看元素监听的事件，在开发中，尤其是维护其他人的代码时，会出现不了解元素对应的监听事件，这个时候，可以在这个面中找到。这个不仅能看到对应的事件函数，还可以定位该函数所在的JS文件以及在该文件中的具体位置（行数）。

图十 Event Listeners功能介绍

（2）Properties

查看元素具有的属性与方法，比去查看API文档与源码更方便直观,新版本的谷歌浏览器可以在console面板执行console.dir($0)实现相同的功能

图十一 通过console实现Properties功能介绍

2.4 Console面板

console是浏览器开发者工具自带的API，通过该面板可以实现代码日志输出、JS的调式、网页中报错信息查看等，其常用的功能如下：

图十二 Console功能面板介绍