Chrome 浏览器必知必会的小技巧

来源:FEWY https://segmentfault.com/a/1190000012143176

说明

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

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

快捷键

快捷键比较多,这里挑出几个常用的说一下 最后会给出一张比较完整的快捷键的表

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

全局快捷键

window

Mac

打开 开发者工具

F12、Ctrl+Shift+I

Cmd+Opt+I

打开 开发者工具 并聚焦到控制台

Ctrl+Shift+J

Cmd+Shift+C

刷新页面

F5、Ctrl+R

Cmd+R

刷新忽略缓存内容的页面

Ctrl+F5、Ctrl+Shift+R

Cmd+Shift+R

在Elements 面板中使用的快捷键

Elements 面板

window

Mac

编辑属性

Enter、双击属性

Enter、双击属性

隐藏元素

H

H

切换为以HTML形式编辑

F2

在Styles 边栏中使用的快捷键

Styles 边栏

window

Mac

转到源中属性值声明行

Ctrl+点击属性值

CMd+点击属性值

在颜色定义值之间循环

Shift+点击颜色选取器框

Shift+点击颜色选取器框

编辑下一个/上一个属性

Tab、Tab+Shift

Tab、Tab+Shift

在控制台中使用的快捷键

控制台

window

Mac

聚焦到控制台

Ctrl+

Ctrl+

清除控制台

Ctrl+L

Cmd+K、Opt+L

多行输入

Shift+Enter

Ctrl+Return

区域截屏

选取页面中的一部分,保存为图片 1、打开开发者工具 使用 快捷键 F12 (Windows) 或 Cmd+Opt+I (Mac)

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

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

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

节点截图

选中页面中某一元素,保存为图片 1、打开开发者工具 使用 快捷键 F12 (Windows) 或 Cmd+Opt+I (Mac)

2、选中任意元素节点

3、打开命令工具 使用快捷键 Ctrl + Shift + p (Windows) 或 Cmd + Shift + p (Mac)

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

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

截全屏

保存完整网页为图片 第一种方式 1、打开开发者工具 使用 快捷键 F12 (Windows) 或 Cmd+Opt+I (Mac)

2、打开命令工具 使用快捷键 Ctrl + Shift + p (Windows) 或 Cmd + Shift + p (Mac)

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

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

第二种方式

1、打开开发者工具 使用 快捷键 F12 (Windows) 或 Cmd+Opt+I (Mac)

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

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

拾色器

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

1、颜色选择区域。 2、吸管。 3、复制到剪贴板。将显示值复制到剪贴板。 4、显示值。颜色的RGBA,HSLA或十六进制表示。 5、调色板。单击其中一个方块将颜色更改为该方块。 6、色相。 7、透明度。 8、显示值切换器。在当前颜色的RGBA,HSLA和Hex表示之间切换。 9、调色板切换器。

快速添加样式规则

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

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

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

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

增加移动设备

1、打开开发者工具 使用 快捷键 F12 (Windows) 或 Cmd+Opt+I (Mac)

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

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

总结

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

觉得本文对你有帮助?请分享给更多人。

原文发布于微信公众号 - 程序员宝库(chengxuyuanbaoku)

原文发表时间:2018-01-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏JetpropelledSnake

Python入门之PyCharm的快捷键与常用设置和扩展(Win系统)

1.  PyCharm的快捷键 2 . PyCharm的常用设置和扩展 ------------------------------------------...

4544
来自专栏Java后端技术

IntelliJ IDEA 15.0.4常用快捷键整理

  最近刚转了IDEA,感觉真是爽的一逼,太智能了,回不去Eclipse了,还有些淡淡的忧伤呢~在使用中很多的快捷键帮了开发的大忙,让我可以达到事半功倍的效果,...

873
来自专栏偏前端工程师的驿站

JS魔法堂:LINK元素深入详解

一、前言                               我们一般使用方式为 <link type="text/css" rel="styleshe...

24010
来自专栏从零开始学 Web 前端

从零开始学 Web 之 移动Web(五)touch事件的缺陷,移动端常用插件

我们在上面《页面分类》的项目中,对 tap 事件的处理使用的是 touch 事件处理的,因为如果使用 click 事件的话,总会有延时。

1422
来自专栏Google Dart

AngularDart Material Design 应用布局 顶

应用布局 应用程序布局是一个样式,指令和组件系统,当它们一起使用时,可以提供材质外观和感知应用程序的层叠关系。 它根据材料规格提供应用栏,抽屉和导航样式。

1863
来自专栏从零开始学 Web 前端

从零开始学Web之HTML(二)标签、超链接、特殊符号、列表、音乐、滚动、head等

文本倾斜:<em></em> <i></i> <!-- 工作里尽量使用em,原因同strong -->

4122
来自专栏coding for love

CSS入门4-引入CSS

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

873
来自专栏ytkah

微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现

先来看看今天的整体思路: 进入分组管理页面-->点击新建分组新建 进入到未分组页面基本操作 进入到已建分组里面底部菜单栏操作-->从名片夹中添加进行操作。 ? ...

3754
来自专栏用户2442861的专栏

notepad++ 快捷键

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/haluoluo211/article/details...

1651
来自专栏Youngxj

bootstrap简洁居中毛玻璃登录源码

4975

扫码关注云+社区

领取腾讯云代金券