使用 Chrome 开发者工具每次都能截取像素级完美的屏幕截图

测试用例——Dev.to 侧边栏导航

步骤

就是这样

虽然大多数操作系统都内置了截图工具，但用户常常希望截取像素级完美的屏幕截图。本文将介绍如何使用 Chrome 开发者工具来实现这一点。

测试用例——Dev.to 侧边栏导航

要使用 Chrome 开发者工具截屏，我们需要截取浏览器中的内容。今天的测试用例是 Dev.to 的侧边栏导航（没错，就是 Dev.to 主页左侧的那个）。以下是一个像素级精确的示例，展示了我们将要截取的内容：

步骤

我们需要采取的步骤如下：

1. 在 Chrome 开发者工具的“元素”面板中找到正确的节点
2. 打开“运行”命令提示符
3. 选择“捕获节点屏幕截图”

1. 找到正确的节点

为了找到正确的节点，我通常会右键单击要查找的元素，然后单击“检查”。这将打开开发者工具中的“元素”面板，您可以在这里浏览以确保选择正确的节点。在本例中，div我们要查找的节点具有一个id属性sidebar-nav。正确选择后，您的屏幕应该如下所示：

2. 打开“运行”命令提示符

选定正确的节点后，我们需要打开“运行”命令提示符。有几种方法可以做到这一点：

1. 点击开发者工具右上角的竖省略号（...），然后点击“运行命令”。
2. （我推荐的方法）直接按 Ctrl + Shift + P

您现在应该看到类似这样的内容：

3. 选择“捕获节点屏幕截图”

输入“捕获节点屏幕截图”，选择正确的选项后按回车键。

你应该看到屏幕，截屏并下载图片！

就是这样

现在你知道如何截取像素级完美的屏幕截图了！希望这能帮助你完成各种任务，从制作设计稿到收集错误报告。