新闻资讯  快讯  焦点  财经  政策  社会
互 联 网   电商  金融  数据  计算  技巧
生活百科  科技  职场  健康  法律  汽车
手机百科  知识  软件  修理  测评  微信
软件技术  应用  系统  图像  视频  经验
硬件技术  知识  技术  测评  选购  维修
网络技术  硬件  软件  设置  安全  技术
程序开发  语言  移动  数据  开源  百科
安全防护  资讯  黑客  木马  病毒  移动
站长技术  搜索  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浏览器的小技巧,很简单,希望对大家有所帮助。这其中的一些小技巧在低版本中是没有的,所以建议大家用最新版的,目前最新版是62,版本很重要,如...【详细内容】
2019-06-06 Chrome  点击:(10)  评论:(0)  加入收藏
推荐资讯
相关文章
    无相关信息
栏目更新
栏目热门
'); })();