浏览器开发者工具

浏览器开发者工具是 Chrome、Firefox、Edge 和 Safari 内置的一组工具。无需安装扩展，就能用它检查网页、模拟设备、截取屏幕并调试布局。

Related workflow terms: 视口截图.

开发者工具能为截图做什么

浏览器开发者工具主要用于调试，但其中有多项功能也适合截图和视觉测试。

你可以直接在浏览器中截取当前可见视口、整个可滚动页面或某个 DOM 元素，不需要扩展或第三方工具。输出格式为 PNG，并采用当前设备像素比，因此在 Retina 显示器上截图会得到 2 倍分辨率的图片。

DOM 检查器允许你在截图前临时修改页面内容。可以隐藏 Cookie 横幅、移除浮层、更改文字或调整样式，然后截取干净的画面。这些修改只存在于本地，刷新页面后就会消失，不会影响线上页面。

网络限速功能可以模拟较慢的连接，用来截取加载状态、骨架屏或超时表现。这有助于记录网页在网络条件不佳时的降级效果。

响应式模式和设备模拟

响应式模式（设备工具栏）无需准备真机，就能模拟不同的视口尺寸和设备特征。Mac 按 Cmd+Shift+M，Windows 按 Ctrl+Shift+M 即可切换。

进入响应式模式后，可以选择 iPhone、iPad、Pixel 或 Galaxy 等预设设备，也可以输入自定义宽度、高度和设备像素比。浏览器会调整视口，并修改 User-Agent 字符串以匹配设备，从而触发相应的响应式断点和设备专用 CSS。

这项功能尤其适合在多种屏幕尺寸下截图。你可以在同一个浏览器会话中切换不同视口并逐一截图，无需维护一组实体设备。对于需要跨断点制作营销截图或文档的团队，它能快速提供预览。不过，要确认像素级准确性，最终仍建议在真机上检查。

如何使用开发者工具截图

Chrome 开发者工具通过命令菜单提供多种截图方式：

1. 打开开发者工具：Mac 按 Cmd+Option+I，Windows 按 Ctrl+Shift+I；
2. 打开命令菜单：Mac 按 Cmd+Shift+P，Windows 按 Ctrl+Shift+P；
3. 输入以下命令之一：
   • “Capture screenshot”——截取当前可见视口
   • “Capture full size screenshot”——截取整个可滚动页面
   • “Capture node screenshot”——截取选中的 DOM 元素
   • “Capture area screenshot”——拖动选择截图区域

Firefox 的内置截图工具提供类似功能，可以从页面的三点菜单进入，也可以在浏览器控制台输入 :screenshot。Safari Web Inspector 则可通过 Elements 标签页的右键菜单截图。

需要反复截图时，可以通过 DevTools Protocol 或无头浏览器编写自动化脚本。不过，只截取一次时，命令菜单通常是从网页得到图片最快的方式。

在实际截图流程中，开发者工具经常用于先确认画面范围、断点表现和一次性修正，再把截图方案做成自动化流程。团队可以用它核对视口尺寸、隐藏干扰元素，并判断某个页面是否值得加入可重复运行的无头截图流程。

常见问题

• 忘记设置设备像素比。 响应式模式默认使用 1 倍 DPR。如果需要 Retina 画质，应在设备工具栏设置中手动改为 2 或 3，否则无论显示器如何，截图都只会采用标准像素密度。
• 把模拟当成真机替代方案。 开发者工具可以模拟视口尺寸和 DPR，但无法完整还原真实设备的渲染引擎、字体显示和触控交互。模拟适合快速预览和初稿，不应作为最终判断依据。
• 截图时保留开发者工具面板。 检查器面板会占用屏幕空间，改变实际视口宽度。应将开发者工具分离到另一个窗口，或在截图前关闭面板，确保视口尺寸准确。
• 忽略滚动位置。 “Capture screenshot”只截取当前可见部分。需要折叠线下方的内容时，应先滚动到相应位置，或用“Capture full size screenshot”截取整个页面。