浏览器开发者工具

浏览器开发者工具（DevTools）是内置于网页浏览器中的开发工具，包括 Chrome DevTools、Firefox Developer Tools 和 Safari Web Inspector。它们可以显示页面结构和样式、输出 JavaScript 日志、记录网络请求并分析性能。

大多数开发者工具都提供设备模拟功能。它可以设置视口宽度和高度、设备像素比以及 User-Agent 字符串，使桌面浏览器像手机一样渲染页面。模拟并不能复现真实设备的浏览器引擎、字体或触控行为。

在 Mac 上的 Chrome 中，按 Option+Command+I 打开开发者工具。在 Safari 中，需要先在设置中开启“开发”菜单，才能使用 Web Inspector。

开发者工具在截图方面的用途

• 截取可见视口、整个可滚动页面、选定区域或单个元素。
• 截图前设置精确的视口尺寸和设备像素比。
• 截图前隐藏或编辑元素，例如 Cookie 横幅或聊天窗口。
• 限制网络速度，查看页面加载过程中的显示效果。

响应式模式与设备模拟

响应式模式在 Chrome 中称为设备工具栏，可将页面区域调整为指定的宽度和高度。预设涵盖常见的手机和平板电脑，也支持自定义尺寸。设备像素比决定每个 CSS 像素生成多少图像像素，因此宽 390 像素的视口在像素比为 3 时会得到宽 1170 像素的截图。

如何用开发者工具截图

1. 打开开发者工具；如需特定尺寸，开启设备工具栏。
2. 按 Shift+Command+P 打开命令菜单。
3. 输入“screenshot”，选择视口、完整尺寸、区域或节点截图命令。
4. 浏览器会下载一个 PNG 文件。

常见错误

• 开发者工具停靠在窗口内部，使普通截图中的视口变小。
• 忘记重置设备模拟，导致之后的截图仍使用手机尺寸。
• 在懒加载图片出现之前就截图。
• 把模拟结果当作页面能在真实设备上正常运行的证明。

需要反复截取同样的画面？

Temposhot Website Capture 可以对一组 URL 以 Desktop 1920×1080、Tablet 768×1024 或 Mobile 390×844 重复相同的截图操作。请参阅 网站截图自动化。

常见问题

开发者工具能把整个页面截成一张图吗？

Chrome 的“Capture full size screenshot”命令会渲染整个页面的高度。页面很长或使用懒加载时，结果仍可能不完整。

截取单个页面有更简单的方法吗？

适用于 Chrome 116 及更高版本的 Temposhot Full Page Screenshot 扩展 会滚动当前页面并下载一个 PNG 文件。

参考资料

• Chrome DevTools 文档
• Web development tools（维基百科）

相关资源

• Website Capture 选项：设备、区域和等待设置。
• 无需代码自动截取网站截图：操作演示。
• Screenshot Resolution Checker：确认截图的像素尺寸。