第一步：打开chrome开发者工具。

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

分别是截取全屏、node 模式以及当前范围，用鼠标点击或者用键盘选择对应的就可以了。

利用Chrome开发者工具功能进行网页整页截图的方法的更多相关文章

  1. 一、Google开发者工具功能页面截图

    一.利用Chrome开发者工具功能进行网页整页截图的方法. 打开你想截图的网页,然后按下 F12(macOS 是 option + command + i)调出开发者工具, 接着按「Ctrl + Sh ...

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

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

  3. Chrome开发者工具之测试应用

    一.Chrome开发者工具简介 浏览器的开发者工具(DevTools)可以帮助开发人员对网页进行布局,比如HTML+CSS,帮助前端工程师更好的调试脚本(JavaScript.jQuery)之类的,还 ...

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

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

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

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

  6. 爬虫 Http请求,urllib2获取数据,第三方库requests获取数据,BeautifulSoup处理数据,使用Chrome浏览器开发者工具显示检查网页源代码,json模块的dumps，loads，dump，load方法介绍

    爬虫 Http请求,urllib2获取数据,第三方库requests获取数据,BeautifulSoup处理数据,使用Chrome浏览器开发者工具显示检查网页源代码,json模块的dumps,load ...

  7. （转）Chrome开发者工具不完全指南（一、基础功能篇）

    本篇转载自卖烧烤夫斯基,并做了小部分的修改. 原文地址:Chrome开发者工具不完全指南(一.基础功能篇) 原作者:卖烧烤夫斯基 就算你不是一名前端开发工程师,相信你也不会对Chrome浏览器感到陌生 ...

  8. Chrome开发者工具不完全指南：（三、性能篇）

    卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements.Network.Resources基础功能部分和Sources进阶功能部分,对于一般的网站项目来说,其实就是需 ...

  9. Chrome开发者工具详解(5)-Application、Security、Audits面板

    Chrome开发者工具详解(5)-Application.Security.Audits面板 这篇文章是Chrome开发者工具详解这一系列的最后一篇,介绍DevTools最后的三个面板功能-Appli ...

随机推荐

  1. 敏捷软件开发_实例1<二>

    敏捷软件开发_实例1 这本书的实例非常好,给了我非常多的启发.主要讲了两个实例,咖啡机和薪水支付实例,咖啡机实例比较简单并没有用什么设计模式,薪水支付实例用了很多设计模式,包括后面的打包等. 咖啡机实 ...

  2. Threads(异步和多线程）

    Task是.NET Framework4.5出现的,线程是基于线程池的,然后提供丰富的api,Thread方法很多很强大,但是太过强大,没有限制. DoSomethingLong方法如下: /// & ...

  3. Java性能之优化RPC网络通信

    服务框架的核心 大型服务框架的核心:RPC通信 微服务的核心是远程通信和服务治理 远程通信提供了服务之间通信的桥梁,服务治理提供了服务的后勤保障 服务的拆分增加了通信的成本,因此远程通信很容易成为系统 ...

  4. emacs 帮助相关命令

    emacs 帮助相关命令 如下表: No. 键盘操作 键盘操作对应的函数 回答的问题 01 ctrl-h c describe-key-briefly 这个按键组合将运行哪个函数 02 ctrl-h ...

  5. centos安装php5、卸载php、安装php7

    这篇文章主要介绍了centos安装php5.卸载php.安装php7 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 首先安装php5很简单 yum install php 然后如果不 ...

  6. arm-linux-gcc-5.4.0安装方法

    首先需要下载arm-linux-gcc的安装包 这里提供一个5.4.0版本的安装包,如有需要自行下载. 下载链接:https://pan.baidu.com/s/1prpdmVNWBFzg79OXQs ...

  7. RSA 登陆加密与解密

    最近公司项目验收后,客户请来的信息安全技术人员对我们的网站进行了各种安全测试与排查问题,其中就有一个登陆时的加密问题.本来如果只是单纯的加密,可以直接在前台用MD5加密,将加密的值添加到数据库即可.但 ...

  8. 第16讲：ODBC&JDBC简介

    一.ODBC简介 1. ODBC的概念 ①ODBC:Open DataBase Connection,即开放数据库连接 ②ODBC是一种标准,它规定了不同语言的应用程序与不同数据库服务器之间通讯的方式 ...

  9. July 13th, 2018. Friday, Week 28th.

    Don't let the mistakes and disappointments of the past control and direct your future. 不要让你的未来被过去的错误 ...

  10. springboot中的照片上传工具类

    public class UploadImgUtils { private static String savePath = ""; /** * 上传照片工具类 * * @para ...