新闻资讯  快讯  焦点  财经  政策  社会
互 联 网   电商  金融  数据  计算  技巧
生活百科  科技  职场  健康  法律  汽车
手机百科  知识  软件  修理  测评  微信
软件技术  应用  系统  图像  视频  经验
硬件技术  知识  技术  测评  选购  维修
网络技术  硬件  软件  设置  安全  技术
程序开发  语言  移动  数据  开源  百科
安全防护  资讯  黑客  木马  病毒  移动
站长技术  搜索  SEO  推广  媒体  移动
财经百科  股票  知识  理财  财务  金融
教育考试  育儿  小学  高考  考研  留学
您当前的位置:首页 > 互联网百科 > 百科

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   点击:()  评论:()
声明:本站部分内容来自互联网,内容观点仅代表作者本人,如有任何版权侵犯请与我们联系,我们将立即删除。
▌相关评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
▌相关推荐
我们在使用谷歌浏览器的时候,如果不想被监视的话,就需要更改代理服务器了,下面我们来说说chrome浏览器怎么更改代理服务器设置?chrome浏览器怎么更改代理服务器设置?chrome浏览...【详细内容】
2019-10-21   Chrome  点击:(69)  评论:(0)  加入收藏
据外媒报道,谷歌Chrome会在内存不足一段时间后自动丢弃一些不用的标签页,现在,Chromium团队正在测试另一种解决方法。据悉,这家公司在Chrome 79 Canary的Tab Freeze标志后面提供...【详细内容】
2019-10-14   Chrome  点击:(29)  评论:(0)  加入收藏
PHP调试工具有很多,这里只介绍ChromePHPChromePHPChromePHP 是 基于谷歌浏览器的插件 .在PHP代码中,不会终止代码,并且会在谷歌 console 台中打印出信息 .插件链接 下载 chr...【详细内容】
2019-10-12   Chrome  点击:(12)  评论:(0)  加入收藏
有些网站采用隐身模式检测是为了防止用户绕过付费,或为隐私模式浏览的用户提供不同的浏览体验。...【详细内容】
2019-09-26   Chrome  点击:(18)  评论:(0)  加入收藏
First paint 直译过来的意思就是浏览器第一次渲染(paint),在First paint之前是白屏,在这个时间点之后用户就能看到(部分)页面内容。...【详细内容】
2019-09-10   Chrome  点击:(20)  评论:(0)  加入收藏
在浏览器地址栏输入chrome://net-internals/#events,即可打开自带的抓包工具。工具处于live状态,其他tab 页有请求刷新,列表会随之刷新请求的快照,点击快照可查看详细的请求信息,配合 network面板能看到一个完整的请求。...【详细内容】
2019-09-09   Chrome  点击:(31)  评论:(0)  加入收藏
前言Chrome浏览器我想是每一个前端er必用工具之一吧,一部分原因是它速度快,体积不大,支持的新特性也比其它浏览器多,还有一部分我想就是因为它的控制台功能强大了吧,说它是神器一...【详细内容】
2019-08-08   Chrome  点击:(28)  评论:(0)  加入收藏
“工欲善其事必先利其器”,作为开发的程序员,好的软件会使我们开发速度显著提升。 比如备受开发者青睐的谷歌浏览器Chrome,Chrome的功能通过成千上万的附加组件和扩展功能进行...【详细内容】
2019-07-31   Chrome  点击:(69)  评论:(0)  加入收藏
没错,就是Tampermonkey,俗称油猴。油猴插件它适用于 Chrome, Microsoft Edge, Safari, Opera Next, 和 Firefox。 虽然有些受支持的浏览器拥有原生的用户脚本支持,但 Tampermo...【详细内容】
2019-07-24   Chrome  点击:(55)  评论:(0)  加入收藏
Chrome堪称浏览器的业界良心,但是你真的完全懂得它的正确打开方式吗?这27条tips能帮助你实现一些你从未想到的功能,提升工作效率、节省大量时间。现在,浏览器不仅仅是我们用以...【详细内容】
2019-07-08   Chrome  点击:(170)  评论:(0)  加入收藏
说明这篇文章主要介绍的就是一些chrome浏览器的小技巧,很简单,希望对大家有所帮助。这其中的一些小技巧在低版本中是没有的,所以建议大家用最新版的,目前最新版是62,版本很重要,如...【详细内容】
2019-06-06   Chrome  点击:(162)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条