1. 概述

    1. 使用 开发者工具 对页面截图
  2. 背景
    1. 经常需要截图
    2. 常用的截图模式有这些
      1. 窗口截图
      2. 区域截图
      3. gif
    3. 问题
      1. Chrome 如何截长图

        1. firefox 好像有插件

1. 解决: 使用 Chrome 自带的 开发者工具

  1. 概述

    1. 使用开发者工具截图
  2. 准备
    1. chrome 浏览器

      1. 最新版本的都带
  3. 步骤
    1. 开发者工具
    2. Elements 标签
      1. 其实哪一页都可以
      2. 但是用 elements 页, 是因为后面需要
    3. ctrl + shift + p
    4. 输入 capture
      1. 输入完, 会有若干选项可选
  4. 选项
    1. capture area screenshot

      1. 概述

        1. 区域截取
      2. 操作
        1. 选中选项
        2. 在浏览器中选择区域
        3. 保存
    2. capture full size screenshot
      1. 概述

        1. 整页截取

          1. 截取浏览器加载的内容
      2. 操作
        1. 选中选项
        2. 保存
    3. capture node screenshot
      1. 概述

        1. 元素截取
      2. 操作
        1. 选中选项
        2. 在 elements 标签中选择 需要的节点
        3. 保存
    4. capture screenshot
      1. 概述

        1. 屏幕截取
      2. 操作
        1. 选中选项
        2. 保存

ps

  1. ref

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

      1. LICEcap
  3. chrome 的开发者工具, 是个神奇的东西
    1. 有空的话, 再详细了解

Chrome - 使用 开发者工具 对页面截图的更多相关文章

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

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

  2. Chrome的开发者工具(Chrome Developer Tools)

    Chrome的开发者工具(Chrome Developer Tools) 按F12 https://developer.chrome.com/devtools/index http://www.w3s ...

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

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

  4. chrome浏览器开发者工具使用教程[转]

    转自:http://www.cr173.com/html/16930_1.html 更多资源:https://developers.google.com/chrome-developer-tools/ ...

  5. 利用Chrome的Performance工具排查页面性能问题(原叫timeline)

    当页面中发生卡顿,最先考虑的是swf文件造成的卡顿,经过排查发现不是swf造成的影响,利用Chrome的Performance工具发现页面中的一些元素不断在重新布局,造成潜在的性能瓶颈. 首先在Chr ...

  6. chrome浏览器开发者工具F12中某网站的sources下的源码如何批量保存?

    目录 chrome浏览器 开发者工具F12中某网站的sources下的源码如何批量保存 1. 常用保存Sources源码的两种方法 1.1单个文件 1.2 单个页面 2. 问题 3.解决方案 chro ...

  7. Chrome DevTools开发者工具调试

    1-1 Chrome DevTools 功能简介 (九大功能面板) (1)Elements元素面板 检查和调整页面,调试DOM,调试CSS (2)Network网络面板 调试请求,了解页面静态资源分布 ...

  8. 谷歌Chrome浏览器开发者工具的基础功能

    上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工具中最有用的面板Sources.Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主要 ...

  9. Mac下safari、chrome打开开发者工具快捷键

    mac下safari和chrome打开开发者工具的快捷键相同,都是option(alt)+command+i 这个是我的默认配置,没有更改过的.

随机推荐

  1. AtCoder Beginner Contest 154 题解

    人生第一场 AtCoder,纪念一下 话说年后的 AtCoder 比赛怎么这么少啊(大雾 AtCoder Beginner Contest 154 题解 A - Remaining Balls We ...

  2. Loj514「LibreOJ β Round #2」模拟只会猜题意 - 模拟

    注意初始化即可. #include <bits/stdc++.h> using namespace std; ],a[],t1,t2,t3,t4; int main(){ memset(a ...

  3. C++ 获取当前正在执行的函数的相关信息(转)

    该功能用在日志打印中 原文地址:C++ 获取当前正在执行的函数的相关信息

  4. 163.扩展User模型-一对一方式扩展

    一对一外键 如果你对用户验证方法authenticate没有更多的要求,就是使用username和password就可以完成用户的登录验证工作,但是想要在原来的模型的基础上添加新的字段,那么就可以使用 ...

  5. react 渲染

    目录 React渲染 createElement的三个参数 element如何生成真实节点 ReactDOMComponent 作用 ReactCompositeComponentWrapper 作用 ...

  6. jQuery实现隔行变色、悬停变色 ( CSS3伪类选择器:nth-child() )

    <title>实现隔行变色</title> <script src="Js/jquery-1.8.0.min.js" type="text/ ...

  7. jenkins pipline 如何禁止任务并行

    背景: 我测试的一个项目CI包括好几个步骤,但是有的步骤是不能并行的,否则会互相影响 处理过程: [方案一]:不推荐此方案 在每个步骤里面的shell脚本中加进程判断 示例:比如本任务有4个步骤,第2 ...

  8. 快速ni

    代码: while(p>0)                   (mul(a,b)) = a*b; { 等同于二分 if(p%2==1) mul(ans,a); 目的是为了二分个基数的二次方乘 ...

  9. 安装破解pycharm2018版

    1.安装2018版pycharm: 2.把破解补丁放在一个地方(目录无中文,无空格): 3.在 Pycharm安装目录的\bin目录下找到 pycharm.exe.vmoptions 和 pychar ...

  10. 安装MySQL5.7.22遇到的坑

    安装MySQL: 第一步:将压缩包解压后,手动新建名为my.ini的文本文档,代码内容如下: #代码开始[mysql]default-character-set=utf8[mysqld]#skip-g ...