By 时代数字趋势2022-03-05
本篇文章将说明如何使用 Google Chrome 开发者工具撷取截图。
如何使用 Chrome 开发者工具截图?
与电脑内建的截图屏幕键(PrtSc)不同的是，使用 Chrome 截图工具不会撷取整个网页的页面，它只会撷取网页内容。
如果你只想要撷取页面内容，又不想要在截图后多一步裁剪图片的动作，那开发人员工具一定能满足你的要求。
你可以点选选单或是快捷键来使用开发人员工具。
若是使用 PC 快捷键为 Ctrl + Shift + I ，MacOS 系统的快捷键则是 Command + Option + I。亦或是点选浏览器右上方「三个点」>更多工具>开发人员工具。点选后会打开开发人员选单，显示出网页的 HTML 原始码。更多工具>开发人员工具。点选后会打开开发人员选单，显示出网页的 HTML 原始码。” width=800 height=425 data-ezsrcset=”https://template.city/wp-content/uploads/2022/02/Image-1.png 800w,https://template.city/wp-content/uploads/2022/02/Image-1-300×159.png 300w,https://template.city/wp-content/uploads/2022/02/Image-1-1024×544.png 1024w,https://template.city/wp-content/uploads/2022/02/Image-1-768×408.png 768w,https://template.city/wp-content/uploads/2022/02/Image-1-1536×816.png 1536w,https://template.city/wp-content/uploads/2022/02/Image-1-150×80.png 150w,https://template.city/wp-content/uploads/2022/02/Image-1-696×370.png 696w,https://template.city/wp-content/uploads/2022/02/Image-1-1068×567.png 1068w,https://template.city/wp-content/uploads/2022/02/Image-1-791×420.png 791w” sizes=”(max-width: 800px) 100vw, 800px” ezimgfmt=”rs rscb17 src ng ngcb17 srcset” data-ezsrc=https://template.city/wp-content/uploads/2022/02/Image-1.png>
然后按下 Ctrl + Shift P (PC) 或是 Command + Shift P (Mac)，或者点选开发人员选单右上方的「三个点」>Run Command（执行命令）（开发人员选单不支援中文）。Run Command（执行命令）（开发人员选单不支援中文）。” width=571 height=568 data-ezsrcset=”https://template.city/wp-content/uploads/2022/02/Image-2.png 571w,https://template.city/wp-content/uploads/2022/02/Image-2-300×298.png 300w,https://template.city/wp-content/uploads/2022/02/Image-2-150×149.png 150w,https://template.city/wp-content/uploads/2022/02/Image-2-422×420.png 422w” sizes=”(max-width: 571px) 100vw, 571px” ezimgfmt=”rs rscb17 src ng ngcb17 srcset” data-ezsrc=https://template.city/wp-content/uploads/2022/02/Image-2.png>
若是要撷取完整画面，在欲截图的页面右上方点选三个点，并选择 Capture screenshot（一般截图）或是 Capture full size screenshot（长截图）。
点选 Run command 后输入「screenshot（截图）」，你会看到以下四个选项。
- Capture area screenshot：自选区域截图
- Capture full size screenshot：全屏幕截图
- Capture node screenshot：节点截图
- Capture screenshot：一般截图
滚动选单并选择你想要的截图方式。
Chrome 开发者截图选项
点选 Capture area screenshot 自选区域截图，可以自行选择截图区域。使用滑鼠鼠标在所要截图之区域拖移出方块即可截图。
若是要整个完整网页的截图，选择 Capture full size screenshot 全屏幕截图。使用长截图可让你取得完整网页的图像，不受当下页面的限制。
根据我们的测试，在不同网页中选择不同选项会有不尽相同的结果。
若你是要一般的截图，点选 Capture screenshot 一般截图，便会撷取当下屏幕显示的页面。
最后，若你只要撷取 HTML 内容，那就要选择 Capture node screenshot 节点截图。
在你成功截图之后，会看到储存的对话框。选择储存的数据夹并且将截图命名。另外，所有使用开发者工具撷取的截图也可以于 Chrome 的下载管理器中查找。
时代数字趋势