新版Chrome浏览器如何使用网页滚动截图

yumo6662周前 (04-23)技术文章16

安装GoFullPage之类的截图插件也可以实现滚动截图,不过插件的截图效率肯定不如浏览器自带的工具,而且安装插件对于浏览器的内存占用,网页加载等多少会有点影响。

那么不安装插件,Chrome浏览器如何实现滚动截图?

以前Chrome网页滚动截图可以用开发者工具里的Capture full size screenshot命令,而现在这个命令搜不到了。

实际上新版本的Chrome把这个截图命令移到了可视化界面中,并且现在可以设置快捷键,使用起来比之前更方便。

首先还是打开开发者工具,然后找到“设置”;

在设置窗口的左侧导航最下边找到“快捷键”,右侧往下翻,找到“屏幕截图”,这里就可以对4中截图命令设置快捷键。

使用的时候,还是要先打开开发者工具这个窗口,然后用设置好的快捷键快速实现网页滚动截图。

Chrome浏览器开发者工具是一款非常强大且易于使用的前端开发工具。其优点包括但不限于以下几点:

实时编辑:可以直接在浏览器中编辑HTML、CSS和JavaScript代码,并且页面可以实时更新。

调试JavaScript代码:提供了丰富的调试工具,比如断点、监控变量、堆栈跟踪等,方便我们快速定位和解决JavaScript代码问题。

查看元素:您可以轻松查看元素的样式、盒模型、事件等。您可以快速了解页面结构,还可以修改样式以达到设计效果。

网络分析:提供网络面板,方便查看网络请求、响应状态码、传输大小等信息,以及网络请求的时间线图表。

性能分析:提供性能面板,可以帮助我们分析页面加载性能、资源优化建议等,帮助我们提高页面性能。

相关文章

Avalonia跨平台入门第二十三篇之滚动字幕

在前面分享的几篇中咱已经玩耍了Popup、ListBox多选、Grid动态分、RadioButton模板、控件的拖放效果、控件的置顶和置底、控件的锁定、自定义Window样式、动画效果、Expande...

电子小制作-滚动文本显示屏!

这是我基于四个 8x8 LED 点阵显示屏的滚动文本显示屏的扩展版本。你可以通过键盘进行编辑,它由 ATtiny85 控制:早期版本是在面包板上搭建的,虽然能完美工作,但不太坚固,一旦掉落组件容易松动...

Excel制作左右滚动在字幕窗体

之前的文章讲过制作字幕上下滚动的窗体。类似的,我们也可以制作左右滚动的字幕窗体。思路跟之前制作上下滚动字幕的场景类似,字幕可以通过设置Label标签的标题来实现;字幕滚动,可以在循环中动态修改Labe...