人人都能掌握的Chrome使用技巧 _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
【人人都能掌握的Chrome使用技巧】查看元素监听的事件，在开发中，尤其是维护其他人的代码时，会出现不了解元素对应的监听事件，这个时候，可以在这个面中找到。这个不仅能看到对应的事件函数，还可以定位该函数所在的JS文件以及在该文件中的具体位置（行数）。