正务库

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

时间:4个月前   游览量:885    标签: 使用技巧    Chrome   

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

1.了解面板

人人都能掌握的Chrome使用技巧 网络技术 第1张

图一 Chrome功能面板

Elements:元素面板

Console:控制台面板

Source: 源代码面板

Audits:审计面板

Network: 网络面板

Performance: 性能面板

Memory: 内存面板

Application: 应用面板

Security:安全面板

Audits: 审计面板

 

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

2.1 Network面板

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

人人都能掌握的Chrome使用技巧 网络技术 第2张

图二 Network面板基本功能介绍


人人都能掌握的Chrome使用技巧 网络技术 第3张

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


人人都能掌握的Chrome使用技巧 网络技术 第4张

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

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

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

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

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

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

人人都能掌握的Chrome使用技巧 网络技术 第5张

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

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

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

Request sent: 发起请求的时间;

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

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

(5) Cookies

人人都能掌握的Chrome使用技巧 网络技术 第6张

图六 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会自动断点到该位置。

人人都能掌握的Chrome使用技巧 网络技术 第7张

图七 断点调试面板

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

人人都能掌握的Chrome使用技巧 网络技术 第8张

图八 断点的相关操作按钮

2.3 Elements面板

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

(1)Style

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

人人都能掌握的Chrome使用技巧 网络技术 第9张

图九 Style功能介绍

(2)Event Listeners

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

人人都能掌握的Chrome使用技巧 网络技术 第10张

图十 Event Listeners功能介绍

(2)Properties

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

人人都能掌握的Chrome使用技巧 网络技术 第11张

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

2.4 Console面板

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

人人都能掌握的Chrome使用技巧 网络技术 第12张

图十二 Console功能面板介绍

以上就是小编日常Chrom使用技巧的总结,如果喜欢不要忘了关注、点赞、转发哦!