13、Chrome 开发者工具

今天来学习下Chrome 开发者工具的常规用法。


一、安装

方法一:(需翻墙)

(1)打开Chrome浏览器,点击右上角“自定义及控制Chrome”按钮(三个点图标)

(2)更多工具,扩展程序

(3)获取更多扩展程序,搜索Chrome  Developer,下载安装并启用

方法二:

(1)百度Chrome Developer 插件,下载文件到本地

(2)打开扩展程序页,将插件文件拖到这里,释放鼠标即可安装


二、Chrome Developer 工具介绍



如上图所示,一共提供了9组工具。下面我们来介绍其中几个。


1、Elements

Elements工具像一把手术刀一样“解剖”了当前页面,我们看到的Elements页面一般像这样子:



图中标记为1的红色区块为页面HTML文件,HTML中的每个元素比如<body>、<p>都是一个DOM节点,所有的DOM节点组成了DOM树。我们完全可以把红色区块1当做是DOM树,把HTML元素标签看做DOM节点。

(1)选择元素按钮

点击一下左上角箭头,再点击一下要查看的元素,比如说“百度一下”按钮,则1的红色区域显示该按钮处的html

(2)切换设备工具条

点击一下打开切换设备工具条,可以根据需要选择屏幕大小(可以模拟移动端显示网页情况)


(3)查找,修改元素
当我们在这里选中某一DOM对象时,网页中相应元素也会被阴影覆盖。我们可以对DOM对象进行修改,修改后结果会在页面实时显示出来。此外,还可以用 Command + f 搜索DOM树中指定的内容,或者是以HTML形式更改页面元素,如下图:


我们搜索:“百度一下”然后修改文字内容,可以看到页面上的“百度一下”,变成了我们修改的文字“Storm啊”


(4)选中DOM对象之后右键即可以看到一些辅助的功能,如图中标记为2的区块所示:
Add Attribute: 在标签中增加新的属性;
Edit as HTML: 以HTML形式更改页面元素;
Copy: 复制XPath、selector等;
Hide/Delete Element: 隐藏/删除元素;
Break On: 设置DOM 断点。

(5)图中被标记为4的蓝色区块显示当前标签的路径:从html开始一直到当前位置,我们单击路径中任何一个标签,即可以跳转到相应标签内容中去。

(6)图中标记为3的蓝色区块实时显示当前选中标签的CSS样式、属性等,一共有以下5小部分:
Styles: 显示用户定义的样式,比如请求的default.css中的样式,和通过Javasript生成的样式,还有开发者工具添加的样式;
Computed: 显示开发者工具计算好的元素样式;
Event Listeners: 显示当前HTML DOM节点和其祖先节点的所有JavaScript事件监听器,这里的监听脚本可以来自Chrome的插件。可以点击右边小漏斗形状(filter)选择只显示当前节点的事件监听器。
DOM Breakpoints: 列出所有的DOM 断点;
Properties: 超级全面地列出当前选中内容的属性,不过基本很少用到。
作为测试人员,我本人暂时很少用到,故省略介绍。


2、Console

多用来前端调试。


(1)做上角删除图标,点击将清楚页面

(2)Filter,可以搜索,过滤目标文本

(3)Default Levels,可以设置日志输出级别

(4)可以在console中,执行一些JavaScript,然后看输出结果。例如console.clear(),可以清楚内容,功能同左上角图标。

当我们测试web的时候,如果某个按钮点击无效,或者某个图标没有显示出来,请看下console下显示什么内容。


3、Network

    有时候我们的网页加载的很慢,而相同网速下,其他网页加载速度并不慢。这时候就得考虑优化网页,优化前我们必须知道加载速度的瓶颈在哪里,这个时候可以考虑使用Network工具。下图为公司X项目首页加载时的Network情况:


(1)可以使用Newwork 页,查看某个页面加载时长,web前端性能测试如果想统计页面加载时长可以借助该工具。

(2)查看请求和响应,以及具体的timing


从里面还可以看到一些比如status Code的值,cookies的值等。


4、performance


如图第一个模块(Control窗格)是点击开始录制,停止,clear。
第二个模块(OverView窗格)右侧提示了FPS(帧频,流畅度),CPU的消耗,NET,HEAP(JavaScript堆内存)
FPS。每秒帧数。绿色竖线越高,FPS 越高。 FPS 图表上的红色块表示长时间帧,很可能会出现卡顿。
2.Cpu.CPU资源
3.NET.每条彩色横杆表示一种资源,横杆越长,检索资源所需要的时间越长,每个横杆的浅色部分表示等待时间(请求资源到第一个字节下载完成时间)、
HTML文件是蓝色。脚本是黄色。样式是紫色。媒体文件是绿色。其它资源是灰色。
4.底下的summary,Details,选择时间显示该事件相关的信息,未选择事件时,此窗格会显示选定时间范围的相关信息。
细节:保证录制的文件很纯粹(简短,没有不必要的操作,停止浏览器缓存,停用扩展程序(使用隐身登录))


第三个模块(环形图)

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页