如何使用Dev Tools在Google Chrome上拍摄屏幕截图

本文介绍了如何使用开发人员工具捕获Chrome中的屏幕截图。

如何使用Chrome开发工具截图

使用打印屏幕键和Chrome工具的区别在于，Chrome截图工具不包括Chrome浏览器窗口的边框，只包括网页内容。如果您只想捕获页面内容而不编辑截图，那么开发人员工具可以为您节省一个步骤。

您可以使用菜单或键盘快捷方式来访问开发人员工具。

1. 新闻Ctrl + Shift + I在个人电脑上，或者命令+选项+ I在Mac上。或者，单击三点菜单图标并选择更多的工具>开发者工具．这样做将打开Element Inspector developer菜单，该菜单显示网页的HTML编码。

   

2. 然后,按Ctrl + Shift P（PC）或ctrl + Shift P（Mac）或单击三点菜单自定义和控制开发工具并选择运行命令．

   

   对于常规或完整大小的截图，单击要捕获的页面顶部的3点菜单图标并选择捕获截图或者捕获全尺寸截图．

3. 输入“截图”查看截图选项，它们是:

   • 捕获区域截图
   • 捕获全尺寸截图
   • 捕获节点截图
   • 捕获截图

   

4. 向下滚动，选择您想要使用鼠标或键盘上的箭头键捕捉的截图类型。

Chrome开发者截图选项

选择捕获区域截图抓取屏幕的一部分。使用鼠标在你想截图的区域周围拖动一个框。

要获取整个网页的屏幕截图，请选择捕获全尺寸截图．这个选项可以让你得到一个网页的图像，不适合在一个屏幕上。

如果你想要一个标准的截图，选择捕获截图，它抓取屏幕上可见的内容。

最后，您可以通过选择来获得HTML元素的屏幕截图捕获节点截图．

截图之后，你会看到一个保存对话框。选择一个文件夹并给你的截图一个文件名。所有使用开发者工具捕获的截图也可以在Chrome的下载管理器中找到。