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所属的URLExpires: cookie存活的时间Size: cookie的字节大小HttpOnly: 表示cookie只能被浏览器设置,JS不能修改Secure: 表示cookie只能在安全连接上传输2.2 Source面板Source面板的主要功能是断点调试，在js代码中写debugger会自动断点到该位置。
图七 断点调试面板在该面板的监视变量上侧有继续运行、单步跳过等按钮，可以在当前断点后，逐行运行代码，或者直接让其继续运行，具体如下:图八 断点的相关操作按钮2.3 Elements面板Elements面板是查看页面元素的面板,页面上使用的元素、元素样式、元素绑定的事件及元素绑定的属性都可以查看。
（1）StyleCSS的预处理器，直接更改CSS样式在界面中可以直观的看到效果。
点击具体位置之后，可以跳转到属性文件具体位置。
图九 Style功能介绍（2）Event Listeners查看元素监听的事件，在开发中，尤其是维护其他人的代码时，会出现不了解元素对应的监听事件，这个时候，可以在这个面中找到。
这个不仅能看到对应的事件函数，还可以定位该函数所在的JS文件以及在该文件中的具体位置（行数）。
图十 Event Listeners功能介绍（2）Properties查看元素具有的属性与方法，比去查看API文档与源码更方便直观,新版本的谷歌浏览器可以在console面板执行console.dir($0)实现相同的功能图十一 通过console实现Properties功能介绍2.4 Console面板console是浏览器开发者工具自带的API，通过该面板可以实现代码日志输出、JS的调式、网页中报错信息查看等，其常用的功能如下：图十二 Console功能面板介绍以上就是小编日常Chrom使用技巧的总结，如果喜欢不要忘了关注、点赞、转发哦。

--喜欢的同学请点击关注哦--本局精彩文章：软负载多活惹的祸，OSPF路由无法正常学习一文秒懂 TCP/IP实际五层结构（上篇）一文秒懂 TCP/IP实际五层结构（中篇）Wireshark数据包分析三板斧你怎么看他进入贵圈的原因在国企做IT是一种什么样的体验

（图片来源网络，侵删）