chrome网页截图豆知识

封面pid=67189496

通常我们截图时一般都是使用Print Screen或者Ctrl+Alt+A或者类似于FireShot的插件,但是chrome其实已经内置了网页截图功能。想知道具体怎么操作就继续往下看吧。

截取整个网页或截取可见部分

  1. 首先打开chrome的开发者工具 (在Windows上用快捷键 F12 或Ctrl+Shift+I,Mac上用快捷键 Command+Opt+I)
  2. 再通过快捷键(Windows上为Ctrl+Shift+P, Mac上为Command+Shift+P)打开命令窗口
  3. 在命令行里输入 capss 就能搜索到命令,上下箭头选择命令,回车键确定
  4. 其中Capture full size screenshot就是截取整个网页,而Capture screenshot是截取当前窗口可见部分。截图完成后,chrome会自动下载截图。

截取网页的一部分

  1. 首先依然需要先打开chrome的开发者工具
  2. 接着点击工具的左上角(或者使用快捷键Windows上用Ctrl + Shift + C,Mac上用CommandShift + C),进入选择选择元素的状态(这时按钮会变成蓝色)
  3. 现在通过鼠标就可以选择你想要截取的元素了(只有蓝色区域才会被截取哦),左键点击即可确认选择
  4. 接着我们依然和上面一样通过快捷键打开命令窗口,输入 capss 后选择 Capture node screenshot 回车!
  5. 这样,刚才我们选择的元素就截图完成了!

结语

PS:如果鼠标元素选择不满意,也可以用右侧的元素树选择,操作和直接在网页上选择差不多,当然也一样会有高亮提醒。

PS2:开发者工具可以在左上角的按钮中,选择停靠或单独打开一个窗口。也可以使用快捷键进行切换(Windows上用Ctrl + Shift + D,Mac上用CommandShift + D

4 Comments

  • ( ゚ 3゚)
    火狐有命令窗口吗,设置里只能截取整个网页
    • koukuko
      火狐也可以,看看这个链接https://developer.mozilla.org/en-US/docs/Tools/Taking_screenshots
  • 不愿透露姓名的阿肥
    匿名版是全给jovi了么?他那边貌似服务端也变更了,接口也变更了,顺便跟他说下服务器挂了。
    • koukuko
      没有 我微博解释说缓存系统坏了的可能不是很清楚。 我在解释下是怎么回事,为什么半天修不好。 1.redis炸了启动不起来,神奇了是第4版重构的时候必须要redis存在才能起 2.redis起不来的原因很有可能是硬盘炸了(数据库不在这个服务器里所以炸服务器也没事) 3.当天好巧不巧在出差,没时间修

Leave a comment