简单说 chrome浏览器 必知必会的小技巧

说明

这篇文章主要介绍的就是一些chrome浏览器的小技巧，很简单，但愿对你们有所帮助。
这其中的一些小技巧在低版本中是没有的，因此建议你们用最新版的，目前最新版是62，版本很重要，若是发现有些技巧不起做用，请先查看浏览器的版本。

快捷键

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

下列快捷键能够在全部 开发者工具 面板中使用

全局快捷键	window	Mac
打开 开发者工具	F十二、Ctrl+Shift+I	Cmd+Opt+I
打开 开发者工具 并聚焦到控制台	Ctrl+Shift+J	Cmd+Shift+C
刷新页面	F五、Ctrl+R	Cmd+R
刷新忽略缓存内容的页面	Ctrl+F五、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

区域截屏

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

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

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

四、图片自动下载好后，点击图片后面的箭头，能够在文件夹中显示

节点截图

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

二、选中任意元素节点

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

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

五、图片自动下载好后，点击图片后面的箭头，能够在文件夹中显示

截全屏

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

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

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

四、图片自动下载好后，点击图片后面的箭头，能够在文件夹中显示

第二种方式
一、打开开发者工具
使用 快捷键 F12 (Windows) 或 Cmd+Opt+I (Mac)

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

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

拾色器

在Styles边栏 点击任意颜色的小色块，就能够弹出颜色选择器

一、颜色选择区域。
二、吸管。
三、复制到剪贴板。将显示值复制到剪贴板。
四、显示值。颜色的RGBA，HSLA或十六进制表示。
五、调色板。单击其中一个方块将颜色更改成该方块。
六、色相。
七、透明度。
八、显示值切换器。在当前颜色的RGBA，HSLA和Hex表示之间切换。
九、调色板切换器。

快速添加样式规则

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

二、鼠标放在这三个小点上，会出现5个小图标，每一个小图标都有做用

三、他们从左到右分别表明

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

增长移动设备

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

二、点击右上方的三个小点，而后选择Settings

三、选择Devices，而后在须要添加的设备前面打上勾就能够了

总结

这些小技巧，很简单，但愿对你们有所帮助，不过对于有办法，有时间的朋友仍是建议去官网看看吧，毕竟那里才更加全面。
Chrome 开发者工具

点击查看原图