本文作者:花雾影

利用 Chrome 控制台进行网页长截图

利用 Chrome 控制台进行网页长截图摘要: 在其他网站看到的教程,用chrome的控制台就可以给网站截整页的图,瞬间又涨姿势了,现在特来整理发布一下。  要想使用截图功能,你需要首先确保 Chrome 已...

在其他网站看到的教程,用chrome控制台就可以给网站截整页的图,瞬间又涨姿势了,现在特来整理发布一下。 

 要想使用截图功能,你需要首先确保 Chrome 已升级至 59 或更高版本。在想要截图的网页中,首先按下Command + Option + I(Windows 为F12)快捷键,召唤出调试界面。 

  *** 一:之一步:打开chrome开发者工具。

打开你想截图的网页,然后按下 F12(macOS 是 option + command + i)调出开发者工具,接着按「Ctrl + Shift + P」(macOS 是 command + Shift + P)。紧接着输入screen,它会提示有三个选项,如下图所示:


利用 Chrome 控制台进行网页长截图 chrome 控制台 长截图 第1张



分别是截取全屏、node 模式以及当前范围,用鼠标点击或者用键盘选择“Capture full size screenshot”然后回车就可以了。 

  *** 二: 

按F12打开调试页面,
然后按下ctrl+shift+p,输入命令Capture full size screenshot,敲回车,浏览器会自动截取整个网页内容。

 

第二步:截取手机版的网页

如果你想在智能手机上截取网页截图,可通过快速键 Ctrl + Shift + M(Mac 为 ⌘Command + ⇧Shift + M)来开启模拟工具,切换 IPhone、iPad、Nexus、Galaxy 等装置开启网页的显示情形,再搭配前面介绍的截图功能抓取网页在手机显示的画面截图。


文章版权及转载声明

作者:花雾影本文地址:https://www.shuipo.net/blog/106.html发布于 2020-06-14
文章转载或复制请以超链接形式并注明出处水泊网

赞(

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论

快捷回复:

评论列表 (暂无评论,25158人围观)参与讨论

还没有评论,来说两句吧...