Chrome技巧记录

Chrome技巧记录

学习文章：

通过阅读和实践 简单说 chrome浏览器 必知必会的小技巧 这篇文章，越加感觉到Chrome浏览器的厉害之处，借此~做个笔记.

快捷键

备注:居于windows系统,建议安装最新的Chrome版本63，wo用的是版本59,还是有点小问题的

打开开发者工具： F12、Ctrl+Shift+I

打开 开发者工具并聚焦到控制台：Ctrl+Shift+J

刷新页面： F5、Ctrl+R

刷新忽略缓存内容的页面： Ctrl+F5、Ctrl+Shift+R

在Elements面板中编辑属性：Enter、双击属性

在Elements面板中隐藏HTML元素 ： H键

在Elements面板中切换为以HTML形式编辑： F2键

在Styles边栏中转到源中属性值声明行： Ctrl+点击属性值

在Styles边栏中，颜色定义值之间循环： Shift+点击颜色选取器框

在Styles边栏中，编辑下一个/上一个属性： Tab、Tab+Shift

聚焦到控制台： Ctrl+

清除Console控制台： Ctrl+L

多行输入： Shift+Enter(试了无效果)

区域截屏(试了无效果):

• 1、打开开发者工具(F12)
• 2、选择左上角的元素选择按钮，图标颜色变为蓝色即表示选中了
• 3、Windows 下按住 Ctrl，然后点击鼠标左键在页面选择区域即可，松开鼠标后，截图自动下载。
• 4、图片自动下载好后，点击图片后面的箭头，可以在文件夹中显示

节点截图(试了无效果)

截全屏：

• 1、打开开发者工具(F12)
• 2、打开命令工具，使用快捷键 Ctrl + Shift + p (Windows)
• 3、点击Capture full size screenshot，或者输入这行中任意的关键字，比如输入full，也会出来这个选项
• 4、图片自动下载好后，点击图片后面的箭头，可以在文件夹中显示

拾色器：在Styles边栏 点击任意颜色的小色块，就可以弹出颜色选择器，进行颜色的选取

快速添加样式规则：

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

• 2、鼠标放在这三个小点上，会出现5个小图标，每个小图标都有作用，从左到右分别代表

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

增加移动设备：

• 打开开发者工具,使用快捷键 F12 (Windows)
• 点击右上方的三个小点，然后选择Settings
• 选择Devices，然后在需要添加的设备前面打上勾就可以了