测试工程师需要知道的浏览器小知识

矫情吗；* 2023-10-12 16:42 58阅读 0赞

## 试浏览器小知识 ##

本期将讨论一些浏览器的小技巧，这些不起眼的小知识存在于浏览器的“开发者工具”部分，了解这些技巧可以提高测试人员的办公效率。请接着往下读，希望对大家有所启发。

![1a3b6496ba556f360a764db87485e0f5.jpeg][]

### **01** 响应式模式 ###

响应式模式是开发人员的必备工具，它主要是谷歌浏览器以及火狐浏览器上的轻量手机模拟器，它能够模拟网页在不同设备上的显示情况。

在火狐浏览器中，它是Tools->Web Developer->Responsive Design Mode。而在谷歌浏览器中，它是View->Developer tools，然后单击设备工具栏，就可以看到谷歌浏览器上面认为该网站将如何在设备上显示。

### **02** 编辑网页 ###

若前端网页出现错误，可以对页面上的html代码进行编辑修改，编辑之后可以查看是否修复了错误。例如：在谷歌浏览器中，首先打开开发者工具，点击第一个tab页也就是Elements，选择想要编辑的html代码，点击后会出现一个包含“Edit as HTML”的菜单，之后编辑元素本身。当按ENTER或RETURN时，网页就会发生变化。这样可以做的不仅仅是查找错误，而是提出实际的修复方案。

### **03** 离线模式 ###

离线模式主要用于测试网页在弱网或断网时的表现，直接关掉wifi或拔掉网线是比较麻烦的，完全可以使用离线模式来进行测试。例如：在谷歌浏览器中，打开开发者工具，选择Network标签，接着会有个默认的"No throtting"和下拉列表，点击之后就选择"Offline"。要是模拟弱网，还可以选"Slow 3G"等选项进行。

### **04** Javascript控制台 ###

它能够执行任意的js代码，它的优势是可以在控制台里直接写代码调用后端接口来进行调试。当会操作dom之后，还可以直接用控制台写代码去实现一些页面上的简单自动化，以提高测试效率。

### **05** 修改文件的保存路径 ###

例如：在火狐浏览器中，在首页选项中，可以看到下载的位置选项，每天保存数十个文件，将这些文件直接放在桌面则可以节省第两次点击，这样一天可以节省一半的点击量，能够提高办公效率。

### **06** 观察页面如何加载 ###

页面是逐渐加载完成的，可以通过录制整个页面加载的过程来寻找页面的性能瓶颈。可以打开开发者工具，选择"performance"标签，之后要勾选上"Screenshots"选项，然后点击录制按钮，最后刷新页面即可。

### **07** 获取免费前端性能报告 ###

对每个网页的性能、可访问性、搜索引擎优化以及它如何根据屏幕大小添加功能来进行评分。内置于谷歌浏览器中，之后转到开发人员工具并单击“lighthouse”选项，以了解分数的详细信息和如何提高分数。

**结语：**

在谷歌浏览器和火狐浏览器中，测试人员可用的工具非常多，但是找到并利用好实用的工具可以极大地提高测试人员的工作效率。技巧并不是所有人都需要，但却是聪明人的首要选择。

**最****后：**下方这份完整的软件测试视频教程已经整理上传完成，需要的朋友们可以自行领取**【保证100%免费】**

![da411ae1e3c744198fac97155e7e6e3c.png][]

#### 整套资料获取 ####

![50a732f988af4f76b02cc82eff7dd7fd.gif][]

[1a3b6496ba556f360a764db87485e0f5.jpeg]: https://img-blog.csdnimg.cn/img_convert/1a3b6496ba556f360a764db87485e0f5.jpeg
[da411ae1e3c744198fac97155e7e6e3c.png]: https://img-blog.csdnimg.cn/da411ae1e3c744198fac97155e7e6e3c.png
[50a732f988af4f76b02cc82eff7dd7fd.gif]: https://img-blog.csdnimg.cn/50a732f988af4f76b02cc82eff7dd7fd.gif