您当前的位置:首页 > 互联网百科 > 百科

Chrome浏览器实用小技巧

时间:2019-06-06 13:59:49  来源:  作者:

说明

这篇文章主要介绍的就是一些chrome浏览器的小技巧,很简单,希望对大家有所帮助。

这其中的一些小技巧在低版本中是没有的,所以建议大家用最新版的,目前最新版是62,版本很重要,如果发现有些技巧不起作用,请先查看浏览器的版本。

快捷键

快捷键比较多,这里挑出几个常用的说一下

最后会给出一张比较完整的快捷键的表

下列快捷键可以在所有 开发者工具 面板中可以使用

Chrome浏览器这么多实用的小技巧,你用过几个?

 

在Elements 面板中使用的快捷键

Chrome浏览器这么多实用的小技巧,你用过几个?

 

 

在Styles 边栏中使用的快捷键

Chrome浏览器这么多实用的小技巧,你用过几个?

 

 

在控制台中使用的快捷键

Chrome浏览器这么多实用的小技巧,你用过几个?

 

 

区域截屏

选取页面中的一部分,保存为图片

1、打开开发者工具

使用 快捷键 F12 (windows) 或 Cmd+Opt+I (mac)

Chrome浏览器这么多实用的小技巧,你用过几个?

 

 

2、选择左上角的元素选择按钮,图标颜色变为蓝色即表示选中了

Chrome浏览器这么多实用的小技巧,你用过几个?

 

3、Windows 下按住 Ctrl,Mac 就按住 Command,然后点击鼠标左键在页面选择区域即可,松开鼠标后,截图自动下载。

4、图片自动下载好后,点击图片后面的箭头,可以在文件夹中显示

Chrome浏览器这么多实用的小技巧,你用过几个?

 

 

节点截图

选中页面中某一元素,保存为图片

1、打开开发者工具

使用 快捷键 F12 (Windows) 或 Cmd+Opt+I (Mac)

Chrome浏览器这么多实用的小技巧,你用过几个?

 

 

2、选中任意元素节点

Chrome浏览器这么多实用的小技巧,你用过几个?

 

 

3、打开命令工具

使用快捷键 Ctrl + Shift + p (Windows) 或 Cmd + Shift + p (Mac)

Chrome浏览器这么多实用的小技巧,你用过几个?

 

 

4、点击Capture node screenshot,或者输入这行中任意的关键字,比如输入node,也会出来这个选项,然后点击这个选项,图片会自动下载。

Chrome浏览器这么多实用的小技巧,你用过几个?

 

 

5、图片自动下载好后,点击图片后面的箭头,可以在文件夹中显示

Chrome浏览器这么多实用的小技巧,你用过几个?

 

 

截全屏

保存完整网页为图片

第一种方式

1、打开开发者工具

使用 快捷键 F12 (Windows) 或 Cmd+Opt+I (Mac)

Chrome浏览器这么多实用的小技巧,你用过几个?

 

 

2、打开命令工具

使用快捷键 Ctrl + Shift + p (Windows) 或 Cmd + Shift + p (Mac)

Chrome浏览器这么多实用的小技巧,你用过几个?

 

 

3、点击Capture full size screenshot,或者输入这行中任意的关键字,比如输入full,也会出来这个选项

Chrome浏览器这么多实用的小技巧,你用过几个?

 

 

4、图片自动下载好后,点击图片后面的箭头,可以在文件夹中显示

Chrome浏览器这么多实用的小技巧,你用过几个?

 

 

第二种方式

1、打开开发者工具

使用 快捷键 F12 (Windows) 或 Cmd+Opt+I (Mac)

2、选中 切换开发模式按钮,图标颜色变为蓝色即表示选中了

Chrome浏览器这么多实用的小技巧,你用过几个?

 

 

3、点右上方的三个 小点,点击Capture full size screenshot,图片会自动下载

Chrome浏览器这么多实用的小技巧,你用过几个?

 

 

拾色器

在Styles边栏 点击任意颜色的小色块,就可以弹出颜色选择器

Chrome浏览器这么多实用的小技巧,你用过几个?

 

 

Chrome浏览器这么多实用的小技巧,你用过几个?

 

 

1、颜色选择区域。

2、吸管。

3、复制到剪贴板。将显示值复制到剪贴板。

4、显示值。颜色的RGBA,HSLA或十六进制表示。

5、调色板。单击其中一个方块将颜色更改为该方块。

6、色相。

7、透明度。

8、显示值切换器。在当前颜色的RGBA,HSLA和Hex表示之间切换。

9、调色板切换器。

快速添加样式规则

1、在Styles 边栏,鼠标放在每一小块样式规则上,右下方都会有三个小点

Chrome浏览器这么多实用的小技巧,你用过几个?

 

 

2、鼠标放在这三个小点上,会出现5个小图标,每个小图标都有作用

Chrome浏览器这么多实用的小技巧,你用过几个?

 

 

3、他们从左到右分别代表

  • 添加 text-shadow
  • 添加 box-shadow
  • 添加 color
  • 添加 background-color
  • 插入样式规则

 

增加移动设备

1、打开开发者工具

使用 快捷键 F12 (Windows) 或 Cmd+Opt+I (Mac)

2、点击右上方的三个小点,然后选择Settings

Chrome浏览器这么多实用的小技巧,你用过几个?

 

 

3、选择Devices,然后在需要添加的设备前面打上勾就可以了

Chrome浏览器这么多实用的小技巧,你用过几个?

 

 

总结

这些小技巧,很简单,希望对大家有所帮助,不过对于有办法,有时间的朋友还是建议去官网看看吧,毕竟那里才更加全面。

来源:FEWY
 



Tags:Chrome   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
一. 配置yum源在目录 /etc/yum.repos.d/ 下新建文件 google-chrome.repovim /etc/yum.repos.d/google-chrome.repo按i进入编辑模式写入如下内容:[google-chrome]name=googl...【详细内容】
2021-12-23  Tags: Chrome  点击:(7)  评论:(0)  加入收藏
年末,又到了各大厂商盘点年度最佳的时候了。不过让世超感到意外的是 Google 竟然给自己 Chrome 的插件,做了一个 2021 年精选集锦,挑选出了 13 款今年最热门的 Chrome 插件。...【详细内容】
2021-12-13  Tags: Chrome  点击:(19)  评论:(0)  加入收藏
谷歌访问助手插件是专门针对chrome谷歌浏览器而开发的一款访问插件,可以为谷歌搜索,谷歌chrome商店,gmail邮箱提供加速服务,解决打不开的问题。这款插件可以帮助我们在使用谷歌...【详细内容】
2021-12-03  Tags: Chrome  点击:(13)  评论:(0)  加入收藏
你在用的浏览器又更新了——本次 Chrome 95 稳定版为标签页分组新增了保存功能,Edge 95 稳定版则带来了更适合笔记本用户的高效能模式和 PDF 阅读体验改进。除此之...【详细内容】
2021-10-27  Tags: Chrome  点击:(42)  评论:(0)  加入收藏
小编在这里为您提供帮助。通过以下几个步骤卸载 Google Chrome 并从 Mac 中删除其所有数据。以下是一些简单的说明。一起啦看看吧!卸载 Google Chrome 应用程序之前从 Mac 上...【详细内容】
2021-10-20  Tags: Chrome  点击:(64)  评论:(0)  加入收藏
尽管 Google Reader 已经被弃用,但是它的精神仍得以延续,Android 端 Chrome 浏览器现在可以使用 RSS 追踪功能了。该功能于今年 5 月开始测试,仅限于 Chrome Canary 频道版本,不...【详细内容】
2021-10-09  Tags: Chrome  点击:(43)  评论:(0)  加入收藏
Chrome F12 介绍 Chrome 开发者工具 F12 是前端开发、测试人员的利器,使用开发者工具可以非常方便地查看页面元素、源文件、控制台、网络等等。其中的 Network 类似与 fiddle...【详细内容】
2021-08-26  Tags: Chrome  点击:(155)  评论:(0)  加入收藏
出品|开源中国文|御坂弟弟Google 在最新发布的 Chrome 浏览器中增加了一批新的 Chrome Actions,以便对该功能进行早期测试。Chrome Actions 是其最近推出的一项实验性功能,它...【详细内容】
2021-05-28  Tags: Chrome  点击:(171)  评论:(0)  加入收藏
Chrome 浏览器快捷命令命令列表 不知道或者忘记了命令怎么办,别急下面这条命令就是来拯救你的,只要记住这一条,就相当于记住了所有的命令,在 地址栏 中 输入下面的指令便可看到...【详细内容】
2021-05-19  Tags: Chrome  点击:(145)  评论:(0)  加入收藏
谷歌去年在 Android 版 Chrome 浏览器上引入了对“往返缓存”的支持,当用户点击后退或前进按钮时,可以瞬时加载页面。据外媒 Windows Latest 报道,谷歌 Chrome 92 版本已添加了...【详细内容】
2021-05-14  Tags: Chrome  点击:(183)  评论:(0)  加入收藏
▌简易百科推荐
在互联网的江湖里头,每天都有新鲜事。我们昨天还在聊元宇宙,还没有了解元宇宙是个啥,今天又开始了web3.0,站在时代的浪潮之巅,哪怕我们只是一滴最普通的水,也会随着巨浪此起彼伏,直...【详细内容】
2021-12-24  程序员老王聊科技    Tags:Web3.0   点击:(7)  评论:(0)  加入收藏
社交媒体营销的好处: 我们可以使用社交媒体来定义企业的品牌标识以及提供的产品或服务。 社交媒体可以和不了解我们产品和服务的人群建立关系。 社交媒体可以和用户完成互动...【详细内容】
2021-12-22  搜索引擎和短视频推广    Tags:社交媒体   点击:(12)  评论:(0)  加入收藏
之前我们讲到说,有些网站在复制的时候会提示一个弹窗,我们可以去掉网站的copy事件监听就可以了,但是我们经常用到的一个网站,百度文库,网站不是这样设计的。 可以随便打开一个百...【详细内容】
2021-12-03  追风Office    Tags:百度文库   点击:(9)  评论:(0)  加入收藏
都说现在的年轻人网上冲浪有三大痛点:听歌被版权拒之门外,看剧被超前点播劝退,网盘下载文件被无情限速。不巧,这些痛点我刚好都经历过,手机里光是这些类型的APP都有好几个,这不是...【详细内容】
2021-11-11  黑科技工具圈    Tags:网盘   点击:(46)  评论:(0)  加入收藏
今天跟大家分享9个珍藏已久的网站,满满的黑科技,保证看完会让你感觉发现了新大陆,下面一起来看看吧。1.国际空间站模拟器这个网站满满的科技感,它在线真实模拟了宇宙飞船对接国...【详细内容】
2021-11-01  职场办公技能    Tags:网站   点击:(33)  评论:(0)  加入收藏
好用的网站能够受益一生,一些优质的网站用起来的确可以这样说。今天分享6个资源丰富的网站,质量杠杠的。 1.【字由网】推荐理由:免费商用字体、字体库 当工作中需要制作海报或...【详细内容】
2021-10-27  小杰好厉害呀    Tags:资源网站   点击:(18)  评论:(0)  加入收藏
终于准备离开网络了吗?如果您正在阅读本文,则您的个人信息很可能会向公众公开。我所说的“公共”是指任何地方的每个人。那么,如何将自己从互联网上删除以阻止公司获取您的信...【详细内容】
2021-10-27  编程老妖    Tags:互联网   点击:(25)  评论:(0)  加入收藏
经过上次会议的"洗礼",郝自信对于职场"黑话"已经有了一定的了解和学习,这次会议他表现如何呢? 播放视频看来,黑话作为职场通用语,不仅能让经验丰富的职场人彼此心照不宣,也能让一...【详细内容】
2021-10-26    计算机世界  Tags:互联网   点击:(26)  评论:(0)  加入收藏
从开始分享软件工具到现在,询问百度网盘名不限速下载的问题就没有间断过,看来大家也是苦百度网盘已久,本文咱们就分享一下百度网盘不限速下载的方法。 文章比较长,实际上操作...【详细内容】
2021-10-25  网创智慧库    Tags:百度网盘   点击:(526)  评论:(0)  加入收藏
我们使用电脑查询或寻找素材时,会去浏览器搜索,搜索结果五花八门,要花时间去筛选。但如果去对应的网站搜索,那就方便多了,今天分享6个资源超多的网站,个个都是精品。 【办公资源网...【详细内容】
2021-10-21  小杰好厉害呀    Tags:网站   点击:(28)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条