google Chrome是一款由Google公司开发的网页浏览器,是程序员们开发前端的必备利器。掌握一定的Chrome调试方法可以快速排查和定位问题,大幅度提高开发效率。下面就由小编来介绍一下Chrome调试时会使用的功能。
图一 Chrome功能面板
Elements:元素面板
Console:控制台面板
Source: 源代码面板
Audits:审计面板
Network: 网络面板
Performance: 性能面板
Memory: 内存面板
Application: 应用面板
Security:安全面板
Audits: 审计面板
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功能面板介绍
以上就是小编日常Chrom使用技巧的总结,如果喜欢不要忘了关注、点赞、转发哦!