转自https://sspai.com/post/42193

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


随后，按下 ⌘Command + ⇧Shift + P（Windows 为 Ctrl + Shift + P），输入命令 Capture full size screenshot（只输前几个字母就能找到），敲下回车，Chrome 就会自动截取整个网页内容并保存至本地。由于是渲染引擎直接输出，其比普通扩展速度更快，分辨率也更高。

利用 Chrome 原生工具进行网页长截图的更多相关文章

  1. 截图还在使用QQ的Ctrl + Alt + A 截图？还不会网页长截图？

    截图还在使用QQ的Ctrl + Alt + A 截图?还不会网页长截图?   手机自带快捷键,常常使用组合键进行快速截图编辑发好友.保存等,但是貌似到了电脑截图就出现了一大堆拍屏幕党,不少人需要打开微 ...

  2. 利用Chrome开发者工具功能进行网页整页截图的方法

    第一步:打开chrome开发者工具. 打开你想截图的网页,然后按下 F12(macOS 是 option + command + i)调出开发者工具,接着按「Ctrl + Shift + P」(mac ...

  3. 利用 Chrome 原生功能截图网页全图

    打开你想截图的网页了,然后按下 F12(macOS 是 option + command + i)调出开发者工具,接着按「Ctrl + Shift + P」(macOS 是 command + Shi ...

  4. 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试

    转自:https://www.ibm.com/developerworks/cn/web/1410_wangcy_chromejs/ 引言 Google Chrome 是由 Goole 公司开发的一款 ...

  5. Chrome开发者工具中Elements(元素）断点的用途

    SAP Engagement Center UI的这个按钮会每秒钟刷新一次,显示页面已经打开了多长时间. 需求:需要找到哪行JavaScript代码不断刷新的按钮文字. 按照经验判断,这个文字肯定是一 ...

  6. 利用google浏览器开发者工具调试网页（详）

    前端程序员或者在校大学生正在开发网页,如果想要测试或者通过测试优化网页结构,该怎么办呢?这就需要用到一款工具,chrome浏览器的开发者工具?本文写给尚不熟悉这个开发者工具的同学们或者同行们,话不多说 ...

  7. 使用Chrome开发者工具调试Android端内网页(微信，QQ，UC，App内嵌页等)

    使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等) 前言 移动端页面调试一直是好多朋友头疼的问题,iOS 由于其封闭的特性和整体较高的性能,整体适配相对好做,调试 ...

  8. 使用Chrome开发者工具远程调试原生Android上的H5页面

    Android4.4(KitKat)开始,使用Chrome开发者工具可以帮助我们在原生的Android应用中远程调试WebView网页内容.具体步骤如下: (1)设置Webview调试模式 可以在Ac ...

  9. chrome比较好用的网站整页（超长网页）截图插件

    chrome比较好用的网站整页(超长网页)截图插件:fireshot capture 试用过比较好用

随机推荐

  1. New Concept English Two 33 91

    $课文89 口误 981. People will do anything to see a free show -- even if it is a bad one. 人们总要想尽办法看不花钱的演出 ...

  2. HDU 3667

    http://acm.hdu.edu.cn/showproblem.php?pid=3667 最小费用最大流 本题流量和费用不是线性关系,fee=a*flow*flow,所以常规套模板spfa无法得到 ...

  3. ZetCode PyQt4 tutorial basic painting

    #!/usr/bin/python # -*- coding: utf-8 -*- """ ZetCode PyQt4 tutorial In this example, ...

  4. 升级到SQL Server 2012/2014时一些需要考虑的事项

    1. 使用Upgrade Adviser评估升级前需要解决的事情. https://msdn.microsoft.com/zh-cn/library/ms144256(v=sql.110).aspx ...

  5. vue-cli 本地开发mock数据使用方法

    vue-cli 中可以通过配置 proxyTable 解决开发环境的跨域问题,具体可以参考这篇文章: Vue-cli proxyTable 解决开发环境的跨域问题 如果后端接口尚未开发完成,前端开发一 ...

  6. i2c接口笔记

    一. i2c基础知识 1. NACK信号:当在第9个时钟脉冲的时候SDA线保持高电平,就被定义为NACK信号.Master要么产生STOP条件来放弃这次传输,或者重复START条件来发起一个新的开始. ...

  7. Libusb学习

    1.参考:http://www.cnblogs.com/Daniel-G/archive/2013/04/22/3036730.html https://baike.so.com/doc/506541 ...

  8. WCF揭秘学习笔记（2）：数据表示

    背景知识 WCF提供了一种语言为软件通信建模,称作服务模型.使用更底层的编程架构提供的类可以从这种语言建立的模型中生成可用的通信软件. 在服务模型使用的语言中,负责通信的软件部分称为服务(servic ...

  9. flexible.js框架改写

    前一阶段拜读了阿里团队的flexible.js,但是flexible的封装感觉还是不完美,因为flexible还是要依赖less/sass之类的编译执行,所以就存了一些问题,我把这些问题进行整理. 优 ...

  10. 基于nginx-rtmp-module模块实现的HTTP-FLV直播模块（nginx-http-flv-module）

    本文后续的内容将在这里更新:<基于nginx-rtmp-module模块实现的HTTP-FLV直播模块(nginx-http-flv-module)续>.注意:下文的配置很多已经不能用了, ...