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

转载 2017年12月10日 00:00:00

来源:FEWY

链接:http://blog.csdn.net/FE_dev/article/details/78623204(点击尾部阅读原文前往)


说明

这篇文章主要介绍的就是一些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)

0?wx_fmt=png

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

0?wx_fmt=png

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

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

0?wx_fmt=png

节点截图

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

0?wx_fmt=png

2、选中任意元素节点

0?wx_fmt=png

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

0?wx_fmt=png

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

0?wx_fmt=png

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

0?wx_fmt=png


截全屏

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

0?wx_fmt=png

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

0?wx_fmt=png

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

0?wx_fmt=png

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

0?wx_fmt=png

第二种方式

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

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

0?wx_fmt=png

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

0?wx_fmt=png


拾色器

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

0?wx_fmt=png

0?wx_fmt=png

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

快速添加样式规则

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

0?wx_fmt=png

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

0?wx_fmt=png

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

  • 添加 text-shadow

  • 添加 box-shadow

  • 添加 color

  • 添加 background-color

  • 插入样式规则


增加移动设备

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

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

0?wx_fmt=png


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

0?wx_fmt=png

总结

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


0?wx_fmt=png

SQL必知必会学习笔记大总结

第一课:了解SQL 数据库:保存有组织的数据的容器(通常是一个文件或一组文件)。注意误用混淆:数据库软件被称为DBMS,数据库是通过DBMS创建和操纵的容器模式:关于数据库和表的布局及特性的信...
  • basycia
  • basycia
  • 2016年09月11日 11:31
  • 2291

《SQL必知必会》(1-7)

《SQL必知必会》读书笔记 说明:本书SQL语句均使用PLSQL Developer客户端,在oracle数据库中实践。 1. 基本概念 表(table):某种特定类型数据的结构化清单。 模式...
  • Regina_niu
  • Regina_niu
  • 2016年12月21日 09:33
  • 413

SQL必知必会第4版读书笔记

SQL必知必会_4 前言 @author 鲁伟林 在读电子版> 第4版时,做了下笔记。供以后自己或者其他学习者参考。 电子版>和书中使用的数据库和表的源代码, 请参看地址:https://gi...
  • thinking_fioa
  • thinking_fioa
  • 2017年10月17日 20:21
  • 10606

正则表达式必知必会

正则表达式必知必会本文共有2571字,阅读耗费11分钟。本文首发于个人博客:http://tanlehua.top/posts/tech/others/learn-regex/...
  • TellH
  • TellH
  • 2016年10月06日 15:21
  • 1226

SQL必知必会 第4版pdf

下载地址:网盘下载 内容简介  · · · · · · SQL语法简洁,使用方式灵活,功能强大,已经成为当今程序员不可或缺的技能。 本书是深受世界...
  • cf406061841
  • cf406061841
  • 2017年06月03日 23:18
  • 4471

《mysql必知必会》笔记(一)

一:了解SQL 1:列是表中的字段,所有表都由一个或多个列组成的。行是表中的记录,表中的数据都按行存储。          2:表中每一行都应该有可以唯一标识自己的一列或一组列。主键(一列或一...
  • gqtcgq
  • gqtcgq
  • 2014年10月27日 09:18
  • 2402

sql必知必会(第四版) 学习笔记一

温习一遍简单的sql语法,把自己掌握还不够的地方,做了些笔记.... 1 去重复关键词,distinct     select distinct sname from student;   2...
  • Dreamworker007
  • Dreamworker007
  • 2013年10月26日 23:02
  • 8042

C++必知必会(1)

条款1数据抽象 抽象数据类型的用途在于将变成语言扩展到一个特定的问题领域。一般对抽象数据类型的定义需要准训以下步骤: 1.     为类型取一个描述性的名字 2.     列出类型所能执行的操作...
  • walkerkalr
  • walkerkalr
  • 2014年05月23日 19:38
  • 930

正则表达式必知必会(修订版)整理教程

正则表达式必知必会(修订版)整理教程 1.   正则表达式入门 1.1  用途:是一种工具,主要用途是搜索变化多端的文本。匹配       到我们想要的信息。 1.2  使用正则表达式:在线测试工具:...
  • T1DMzks
  • T1DMzks
  • 2016年07月03日 01:33
  • 10402

《MySQL必知必会》学习笔记七(复杂查询)------掌握部分

《MySQL必知必会》学习笔记整理
  • sinat_28978689
  • sinat_28978689
  • 2017年02月09日 21:02
  • 289
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Chrome 浏览器 必知必会的小技巧
举报原因:
原因补充:

(最多只允许输入30个字)