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

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

这篇文章主要介绍的是chrome浏览器使用中的一些小技巧,很简单,分享给大家,UI设计的小伙伴们注意啦!截屏 so easy!。
这其中的一些小技巧在低版本中是没有的,所以建议大家用最新版的,目前最新版是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、图片自动下载好后,点击图片后面的箭头,可以在文件夹中显示

发表评论

邮箱地址不会被公开。 必填项已用*标注