13、Chrome 开发者工具

来源：互联网发布：占中事件知乎编辑：程序博客网时间：2024/06/05 20:06

今天来学习下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，选择时间显示该事件相关的信息，未选择事件时，此窗格会显示选定时间范围的相关信息。
细节：保证录制的文件很纯粹（简短，没有不必要的操作，停止浏览器缓存，停用扩展程序（使用隐身登录））

第三个模块（环形图）

阅读全文

0 0