【小技巧】利用 Chrome 原生工具进行网页长截图

利用 Chrome 原生工具进行网页长截图 | 一日一技

之前试用 Firefox Quantum 时，我最喜欢的特性之一就是其自带的截图功能。它不仅可以自动检测网页元素边界，还能轻松保存整个网页，十分方便。

后来由于扩展及习惯等原因，我又换回了 Chrome，但还是对该功能念念不忘。尽管商店里也有许多截图增强扩展，但在截取一些比较复杂的网页时，往往会出现元素错位、重复的现象。经过一番探索，我发现 Chrome 开发者工具中其实自带了截图命令，效果也令人满意，在这里分享给大家。

要想使用截图功能，你需要首先确保 Chrome 已升级至 59 或更高版本。在想要截图的网页中，首先按下 ⌘Command + ⌥Option + I （Windows 为 F12） 快捷键，召唤出调试界面。随后，按下 ⌘Command + ⇧Shift + P （Windows 为 Ctrl + Shift + P），输入命令 Capture full size screenshot（只输前几个字母就能找到），敲下回车，Chrome 就会自动截取整个网页内容并保存至本地。由于是渲染引擎直接输出，其比普通扩展速度更快，分辨率也更高。

网页截长图步骤：

• Windows 为 F12
• Windows 为 Ctrl + Shift + P
• Capture full size screenshot

除了普通长截图以外，你还可以利用这一功能截取手机版网页长图。只需要按下 ⌘Command + ⇧Shift + M （Windows 为 Ctrl + Shift + M） 模拟移动设备，再按刚才的方法运行命令就可以了。在顶部的工具栏中，你可以选择要模拟的设备和分辨率等设置。
如果你想准确截取网页的某一部分，可以按下 ⌘Command + ⇧Shift + C （Windows 为 Ctrl + Shift + C） 嗅探元素。选中想要的部分后，再运行 Capture node screenshot 命令，一张完美的选区截图就诞生了。

截取手机版网页长图：

• Windows 为 Ctrl + Shift + M

准确截取网页的某一部分：

• Windows 为 Ctrl + Shift + C
• Capture node screenshot

---

20240517更新

使用 Chrome 浏览器的原生开发者工具进行网页长截图的步骤如下：

1. 打开 Chrome 浏览器并进入需要截图的网页。

2. 打开开发者工具：

   • 可以通过快捷键 Ctrl + Shift + I（Windows）或 Cmd + Option + I（Mac）来打开开发者工具。
   • 也可以点击右上角的三点菜单，依次选择 “更多工具” -> “开发者工具”。

3. 进入设备模式：

   • 在开发者工具界面的左上角，有一个设备工具栏图标（看起来像一个手机和一个平板），点击它进入设备模式。或者使用快捷键 Ctrl + Shift + M（Windows）或 Cmd + Shift + M（Mac）。

4. 调整视口设置：

   • 在设备模式下，可以在顶部工具栏中设置视口尺寸，也可以选择预设的设备类型。
   • 可以通过拖动视口边缘来手动调整宽度和高度。

5. 截取长截图：

   • 在设备模式中，点击右上角的三点菜单（开发者工具内的三点菜单，不是浏览器的）。
   • 选择 “Capture full size screenshot”（捕获全尺寸截图）。
   • Chrome 会自动滚动并截图整个网页。

6. 保存截图：

   • 截图完成后，Chrome 会自动下载生成的图片文件，文件通常保存到默认的下载目录中。

这些步骤可以帮助你使用 Chrome 浏览器的原生开发者工具截取整个网页的长截图，而不需要额外的插件或第三方工具。