　 “通过掌握 Chrome DevTools 或其他浏览器的等效工具，测试人员可以显著提升测试过程的质量和效率，最终支持更快的问题解决和更稳定的用户体验。”

　　你知道吗？Chrome DevTools 不仅是开发者的工具，也是测试人员的利器。作为一名 QA 专业人士，发现缺陷固然重要，但理解缺陷的根本原因并提出解决方案，才能将测试提升到一个新的水平。

　　如果你不使用 Chrome，每种现代浏览器都有类似 Chrome DevTools 的工具，功能也很相似。因此，你可以在自己选择的浏览器中运行这些测试。

　　为了最大化利用 Chrome DevTools 的价值，测试人员需要对 HTML、CSS、DOM、JavaScript 以及阅读网络级响应有一定的了解。

　　什么是 Chrome DevTools？

　　Chrome DevTools 是一个强大的网络工具包，能够让你检查和调试网站及网络应用程序。对于测试人员来说，它提供了一种高效的方式来检查元素、分析控制台日志、监控网络活动以及评估页面性能。

　　让我们通过以下 10 个测试，探索使 Chrome DevTools 对测试人员极具价值的功能。

　　测试 1：使用元素标签页排查间距问题

　　Chrome DevTools 的元素标签页分为两个视图：HTML 和 CSS。右键单击任何元素并选择检查，或使用 Chrome DevTools 左上角的箭头悬停在任何元素上并选择它，这将在右侧面板中显示样式。这允许实时修改 HTML 和 CSS，而无需永久更新代码。

　　下图展示了一个页面，其中分隔线和横幅图像之间存在意外的间距。假设在设计中，横幅图像应该紧贴分隔线。

图 1：由分隔线和图像之间的间距导致的横幅图像问题

　　悬停在分隔线或横幅图像上以捕获间距区域并选择它。下图展示了检查到的间距区域。

图 2：悬停在顶部区域以捕获间距

　　从 CSS 中移除 margin-bottom 样式可以解决间距问题。

图 3：从 CSS 文件中移除 margin-bottom 样式解决了间距问题

　　从上述三张截图可以看出，你可以悬停在间距上捕获它，检查它，并通过调整外边距或内边距来排查问题。

　　测试 2：使用检查元素功能排查阻碍用户导航的问题

　　在下图中，界面提供了用于幻灯片导航的“轮播点”。然而，这些点只有部分可见。这些点应该完全可见，以便用户可以轻松选择它们来切换到下一张幻灯片。

　　显示幻灯片的区域有一个边界，会隐藏边界外的任何内容（一个名为 overflow-hidden 的样式）。因此，幻灯片边缘的点被截断了，用户很难正确看到或选择它们。

图 4：幻灯片中半隐藏的轮播点

　　要排查此问题，只需悬停在内容上，你将看到轮播点上的绿色阴影溢出。当你选择它时，你将在右侧看到相关的样式。

图 5：悬停在 carousel 元素上以观察 overflow-hidden 的 CSS 值

　　取消选中 overflow-hidden 属性，你会看到问题在不改变点的位置的情况下得到解决。

图 6：移除 overflow-hidden 属性以解决问题

　　测试 3：使用控制台标签页识别 JavaScript 错误

　　控制台标签页是一个重要的工具，用于识别以红色标记的 JavaScript 错误，这使得它们很容易被找到。因为有数百种可能的错误类型，你分析它们的能力只能通过经验积累。在某些情况下，开发人员会在代码中附加脚本，以便更容易识别与脚本相关的故障。

　　当网站部署到生产环境时，控制台中不应该有任何错误。然而，服务器或网络问题有时会生成日志。

　　下图显示了控制台错误日志中与插入工作区的图表相关的某些损坏文本。然而，这个错误并不是该网站的所有用户都会遇到。在这种情况下，应该及时为特定客户提供热修复，而不是让他们等待一般应用程序级别的解决方案。

图 7：控制台中图表中损坏文本元素的文本 ID

　　测试 4：分析控制台中的错误日志

　　在下图中，从错误本身来看，很明显日志与某些 cookie 属性中的安全问题有关。如果这种类型的错误未被处理，可能会导致会话管理问题、分析数据不一致、应用程序行为不一致等。因此，如果网站依赖 cookie 或同源策略，这个错误需要被验证并修复。

图 8：与 cookie 属性安全问题相关的控制台日志错误

　　测试 5：通过在控制台运行自定义 JavaScript 查找损坏链接

　　你可以在控制台中运行自定义 JavaScript 来查找损坏链接、清除页面缓存等。

　　以下代码片段会检查损坏的链接，调用函数 checkBrokenLinks() 将查找并显示所有损坏的链接，并将它们标记为红色。在测试无法从外部网络访问的页面时，这非常有帮助。

　　// 检查链接是否损坏的函数async function checkBrokenLinks() {
　　 // 获取页面上所有的  元素
　　 const links = document.querySelectorAll('a');
　　 // 遍历每个链接
　　 for (let link of links) {
　　 const href = link.getAttribute('href');
　　 // 跳过空的或不存在的 href 链接
　　 if (!href || href.startsWith('#') || href.startsWith('mailto:') || href.startsWith('javascript:')) {
　　 continue;
　　 }
　　 try {
　　 // 获取链接并检查响应状态
　　 const response = await fetch(href, { method: 'HEAD' });
　　 // 如果状态码不是 OK（即不是 2xx）
　　 if (!response.ok) {
　　 console.log(`发现损坏的链接：${href} (状态：${response.status})`);
　　 link.style.color = 'red'; // 可选地将损坏的链接标记为红色
　　 }
　　 } catch (error) {
　　 // 如果发生错误（例如，网络错误，或链接无法到达）
　　 console.log(`发现损坏的链接：${href} (错误：${error.message})`);
　　 link.style.color = 'red'; // 标记损坏的链接
　　 }
　　 }}