特殊需求下的DevTools使用心得

前言

提起DevTools，大家并不陌生，是内嵌在 Chrome 浏览器里的一组用于网页制作和调试的工具。作为日常开发工具之外，也有助于辅助测试。 常见的运用场景这里不做过多介绍，今天小编列举一些特殊的测试场景，说明DevTools在日常测试中的重要性。

案例一

干货总结： 涉及到网页元素获取的需求，均可以通过DevTools工具进行辅助测试。 实例： 针对网页中的广告，点击广告时回传点击坐标。 操作方式： ① DevTools→Elements→元素选择箭头按钮； ② 通过元素选择箭头按钮，可以获取广告位的宽高值； 注意事项： 此时需要注意的是通常的广告位分为标题，物料和底部来源与按钮，因此获取的广告位宽高值应该涵盖上述两个区域。 ③ 通过实际的点击，查看程序输出的宽高和点击坐标，验证是否超出了第②步中的广告位区域； 注意事项：在校验点击坐标是否超出了广告位区域时，可以利用边界值测试法，从广告位的四个角以及中间区域选择坐标进行验证；

案例二

干货总结： 涉及到前端js注入的需求，均可以通过DevTools工具进行辅助测试。 实例： 特定域名网页客户端注入前端js。 操作方式： ① DevTools→Network→Console； ② 输入需求规定的JS集成器，查看集成器是否存在。例如下图中的SogouLoginUtils（集成了相关的js），若没有SogouLoginUtils，则说明该域名网页并没有注入相关的js；

③ 确定SogouLoginUtils集成器存在的情况下，点击enter键，便会展现出集成器中所涵盖的所有js方法，通过检索，便可验证“特定域名网页注入js”是否通过验收；

案例三

干货总结：

涉及到前端方法输出的需求，均可以通过DevTools工具进行辅助测试。

实例：

网页图片收集，客户端展现成图集列表。

注释：该需求需要通过网页注入js的方式，将网页内的图片url放到数组内，通过接口的方式传给客户端，此时我们需要测试js是否可以正常的将网页内图片的url获取到，此时就用到了DevTools。

操作方式：

① DevTools→Elements；

② 长按左侧的图片，此时执行js检索网页图片，检索完毕之后会在右下角显示方法输出结果；

以下代码为前端js执行完收集图片返回的图片url信息。其中nowImage为当前长按的图片；allImages为检索出来的网页内的图片；其余的字段为网 页标题和域名；

{
"nowImage": {
  "src": "https://5b0988e595225.cdn.sohucs.com
         /q_70,c_zoom,w_640/images/20200226/
         b86b7cc327294d879dc7316fbae92ae4.jpeg",
  "w": 331,
  "h": 220,
  "index": 0
   },
"allImages": [{
  "src": "https://5b0988e595225.cdn.sohucs.com/
         q_70,c_zoom,w_640/images/20200226/
         b86b7cc327294d879dc7316fbae92ae4.jpeg",
  "w": 331,
  "h": 220,
  "index": 1
   }, {
  "src": "https://5b0988e595225.cdn.sohucs.com/
       q_70,c_zoom,w_640/images/20200226/
       9e9996dc75e24cecaa17dfe3cfd4b3f6.webp",
  "w": 331,
  "h": 220,
  "index": 2
   },{
   "src": "https://img02.sogoucdn.com/
          app/a/200630/
          109259b112feacf7ec75b658c8be79fe",
   "w": 331,
   "h": 186,
   "index": 4
   }, {
   "src": "https://643108e7617ef.cdn.sohucs.
          com/1dddd4ef3c5b457088e2e01dc4ee9d52.webp",
   "w": 335,
   "h": 168,
   "index": 5
   }],
   "pageTitle": "全民战疫｜平民英雄：“我
                不是医生，但我也在战斗”_手机搜狐网",
   "domain": "m.sohu.com"
}

总结

通过以上实例讲解，小编介绍了利用DevTools进行特殊需求测试的方法，除了上述的场景之外，小编后续会继续整理相关DevTools特殊用法，希望大家批评指正。