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

2017/11/29 · JavaScript · 3 评论 · Chrome

原文出处： FEWY   

 姓名：丁英琦

说明

这篇文章主要介绍的就是一些chrome浏览器的小技巧，很简单，希望对大家有所帮助。
这其中的一些小技巧在低版本中是没有的，所以建议大家用最新版的，目前最新版是62，版本很重要，如果发现有些技巧不起作用，请先查看浏览器的版本。

 学号：17101223408

Chrome

快捷键

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

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

在Elements 面板中使用的快捷键

Elements 面板

window

Mac

编辑属性

Enter、双击属性

Enter、双击属性

隐藏元素

H

H

切换为以HTML形式编辑

F2

在Styles 边栏中使用的快捷键

在控制台中使用的快捷键

 转载自： 有改动

有一家神奇的公司叫做Google，有一个强大的浏览器称为chrome。从以前使用firefox的插件firebug转战chrome调试已有些日子，不得不说，chrome的调试简单、强大，当然如果知道以下的快捷键将会使前端开发事半功倍。

区域截屏

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

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

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

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

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

快捷键

节点截图

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

2、选中任意元素节点

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

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

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

【嵌牛鼻子】chrome浏览器的小技巧

DevTools具有一些内建的快捷键，开发者可以在日常的开发过程中使用它们以节约时间。以下列举的是每个快捷方式在Windows / Linux和Mac下相应的快捷键。有些快捷键是在全局有效的，而有些只是在某一个面板生效，and are broken up based on where it can be used.

截全屏

保存完整网页为图片
第一种方式
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，图片会自动下载

【嵌牛提问】chrome浏览器的小技巧你知道多少？

打开DevTools

拾色器

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

【嵌牛正文】

在Google Chrome的任何页面或者应用中，你可以通过以下的方式打开 DevTools:

快速添加样式规则

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

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

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

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

快捷键

打开浏览器窗口右上方的 Chrome 菜单 img，选择工具 > 开发者工具(Tools > Developer Tools).

增加移动设备

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

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

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

快捷键比较多，这里挑出几个常用的说一下

在任意的页面元素中鼠标右键，选择审查元素(Inspect Element).

总结

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

Chrome 开发者工具

2 赞 5 收藏 3 评论

最后会给出一张比较完整的快捷键的表

功能Windows / LinuxMac

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

打开 Chrome DevToolsF12, Ctrl Shift I     Cmd Opt I

全局快捷键windowMac

打开／切换 审查元素模式和浏览模式Ctrl Shift C     Cmd Shift C

打开 开发者工具F12、Ctrl Shift ICmd Opt I

打开 Chrome DevTools ,并聚焦在 console 上Ctrl Shift J    Cmd Opt J

打开 开发者工具 并聚焦到控制台Ctrl Shift JCmd Shift C

审查审查器 (取消第一个审查器的停靠后再按键)Ctrl Shift J    Cmd Opt

刷新页面F5、Ctrl RCmd R

• J

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

在Chrome DevTools 窗口是打开时，按下“?”或者“F1”键可以打开设置对话（General Settings）框。按下“Esc”可以关闭设置对话框。

在Elements 面板中使用的快捷键

全部面板

Elements 面板windowMac

功能Windows / LinuxMac

编辑属性Enter、双击属性Enter、双击属性

打开 General Settings 对话框?, F1?

隐藏元素HH

下一个面板Ctrl ]    Cmd ]

切换为以HTML形式编辑F2

上一个面板Ctrl [    Cmd [

在Styles 边栏中使用的快捷键

标签历史中后退Ctrl Alt [    Cmd Alt [

Styles 边栏windowMac

标签历史中前进Ctrl Alt ]    Cmd Alt ]

转到源中属性值声明行Ctrl 点击属性值CMd 点击属性值

跳转至标签页 1-9 (需要在设置对话框中开启服务)Ctrl 1-9     Cmd 1-9

在颜色定义值之间循环Shift 点击颜色选取器框Shift 点击颜色选取器框

打开/关闭 Console 或 关闭设置对话框EscEsc

编辑下一个/上一个属性Tab、Tab ShiftTab、Tab Shift

刷新页面F5, Ctrl R    Cmd R

在控制台中使用的快捷键

强制刷新页面，清除缓存内容Ctrl F5, Ctrl Shift R    Cmd Shift R

控制台windowMac

当前文件或标签页搜索文字Ctrl F    Cmd F

聚焦到控制台Ctrl Ctrl

所有资源中搜索文字Ctrl Shift F    Cmd Alt F

清除控制台Ctrl LCmd K、Opt L

搜索文件(除了 Timeline面板)Ctrl O,   Cmd O

多行输入Shift EnterCtrl Return

恢复默认字体大小Ctrl 0   Shift 0

区域截屏

放大Ctrl Shift

选取页面中的一部分，保存为图片

缩小Ctrl -Shift -

1、打开开发者工具

元素(Elements) 面板

使用 快捷键 F12 (Windows) 或 Cmd Opt I (Mac)

功能Windows / LinuxMac

撤销改动Ctrl Z   

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

恢复改动Ctrl Y        Cmd Shift Z

导航Up, DownUp, Down

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

伸缩展开元素Right, LeftRight, Left

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

展开元素单击某个html标签单击某个html标签

编辑元素属性Enter, 双击属性Enter, 双击属性

节点截图

隐藏元素    H

选中页面中某一元素，保存为图片

切换编辑为HTML     F2

1、打开开发者工具

右键单击某个元素时你可以做：

使用 快捷键 F12 (Windows) 或 Cmd Opt I (Mac)

强制元素在某个伪类状态: (:active, :hover, :focus, :visited)

为元素设置断点（子元素修改，属性更改，元素删除）

2、选中任意元素节点

清除 console

样式(Styles) 侧边栏

3、打开命令工具

功能Windows / LinuxMac

使用快捷键 Ctrl Shift p (Windows) 或 Cmd Shift p (Mac)

编辑规则单击单击

添加新属性空白处单击空白处单击

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

跳转到样式规则属性在样式表的行数Ctrl 单击某个CSS属性Cmd 单击某个CSS属性

跳转到属性值在样式表的行数Ctrl 单击某个CSS属性值Cmd 单击某个CSS属性值

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

循环颜色定义值Shift 单击颜色选择器Shift 单击颜色选择器

查看自动填充建议Ctrl 空格Cmd 空格

截全屏

编辑下一个 / 上一个属性Tab,    Shift TabTab,    Shift Tab

保存完整网页为图片

增大 / 减小属性值Up, DownUp, Down

第一种方式

增大 / 减小属性值 （最小单位 10 ）Shift Up,   Shift DownShift Up,   Shift Down

1、打开开发者工具

增大 / 减小属性值 （最小单位 10 ）PgUp,  PgDownPgUp, PgDown

使用 快捷键 F12 (Windows) 或 Cmd Opt I (Mac)

增大 / 减小属性值 （最小单位 100）Shift PgUp,    Shift PgDown    Shift PgUp,    Shift PgDown

增大 / 减小属性值 （最小单位 0.1）Alt Up,    Alt Down   Opt Up,    Opt Down

2、打开命令工具

(img)[img]仿真元素伪类 (:active, :hover, :focus, :visited)

使用快捷键 Ctrl Shift p (Windows) 或 Cmd Shift p (Mac)

(img)[img]添加新的CSS样式规则

资源(Sources)面板

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

功能Windows / LinuxMac

中断/恢复脚本执行F8, Ctrl F8, Cmd

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

跳过下一个函数F10, Ctrl 'F10, Cmd '

跳入下一个函数F11, Ctrl ;F11, Cmd ;

第二种方式

跳出当前函数Shift F11,  Ctrl Shift ;  Shift F11,  Cmd Shift ;

1、打开开发者工具

Select next call frameCtrl .Opt .

使用 快捷键 F12 (Windows) 或 Cmd Opt I (Mac)

Select previous call frameCtrl ,Opt ,

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

切换断点状态单击行数, Ctrl B单击行数, Cmd B

编辑断点调节右键单击行数右键单击行数

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

Delete individual wordsAlt DeleteOpt Delete

注释某行或选择文字Ctrl /Cmd /

拾色器

保存本地的更改Ctrl S    Cmd S

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

保存所有的更改Ctrl Shift S    Cmd Shift S

跳转到某行Ctrl G    Ctrl G

按文件名搜索文件Ctrl O   Cmd O

1、颜色选择区域。

跳转到某行（Jump to line number）Ctrl P :     Cmd P :

2、吸管。

跳转到某列Ctrl O : :         Cmd O : :

3、复制到剪贴板。将显示值复制到剪贴板。

打开 member    Ctrl Shift O      Cmd Shift O

4、显示值。颜色的RGBA，HSLA或十六进制表示。

切换 console 并评估（ evaluate？） Sources 面板中选中的代码Ctrl Shift

5、调色板。单击其中一个方块将颜色更改为该方块。

• ECmd Shift E

6、色相。

关闭当前激活的标签Alt WOpt W

7、透明度。

运行代码片段Ctrl Enter     Cmd Enter

8、显示值切换器。在当前颜色的RGBA，HSLA和Hex表示之间切换。

切换注释Ctrl /    Cmd /

9、调色板切换器。

(img)[IMG] Don't 暂停 on exceptions

快速添加样式规则

(img)[IMG] 暂停 on All Exceptions (包括那些在try/catch块中被捕获的)

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

(img)[IMG] 暂停 on Uncaught Exceptions (正常情况下是你想要的那个)

Timeline Panel

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

功能Windows / LinuxMac

开启/停止 记录Ctrl E    Cmd E

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

保存时间轴数据Ctrl S   Cmd S

添加 text-shadow

加载时间轴数据Ctrl O   Cmd O

澳门新浦京娱乐场网站必知必会的小技巧，chromeDev快捷键总结。添加 box-shadow

Profiles Panel

添加 color

功能Windows / LinuxMac

添加 background-color

开启/停止 记录Ctrl E   Cmd E

插入样式规则

Console

增加移动设备

功能Windows / LinuxMac

1、打开开发者工具

下一个建议TabTab

使用 快捷键 F12 (Windows) 或 Cmd Opt I (Mac)

上一个建议Shift Tab                    Shift Tab

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

接受建议RightRight

上一个命令/行Up            Up

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

下一个命令/行Down        Down

清除控制台记录Ctrl L                       Cmd K,                    Opt L

总结

多行输入Shift Enter                 Ctrl Return

澳门新浦京娱乐场网站必知必会的小技巧，chromeDev快捷键总结。这些小技巧，很简单，希望对大家有所帮助，不过对于有办法，有时间的朋友还是建议去官网看看吧，毕竟那里才更加全面。

执行Enter      Return

console 中右键单击:

XMLHTTPRequest 记录: 打开后可查看 XHR 记录

Preserve log upon navigation

过滤: 隐藏或显示所有来自脚本文件的消息

清除 console: 清除所有的 console 消息

Screencasting

功能Windows / LinuxMac

视图微调 放大或缩小Alt Scroll,Ctrl Cick and drag with two fingersOpt

• Scroll, Cmd Cick and drag with two fingers

审查元素工具Ctrl Shift CCmd Shift C

模拟

功能Windows / LinuxMac

视图微调 放大或缩小Shift Scroll                Shift Scroll

其他 Chrome 快捷键

以下的 Chrome 快捷键在日常使用中非常有用，它并不是特意为 DevTools开发的，

功能Windows / LinuxMac

寻找下一个Ctrl G    Cmd G

寻找前一个Ctrl Shift G    Cmd Shift G

在隐身模式下打开一个新窗口Ctrl Shift N    Cmd Shift N

开启或关闭书签栏Ctrl Shift B    Cmd Shift B

查看历史记录Ctrl H      Cmd Y

查看下载记录Ctrl J               Cmd Shift J

查看任务管理器Shift ESC             Shift ESC

标签浏览历史中的下一个页面Alt Right                Alt Right

标签浏览历史中的上一个页面Backspace, Alt Left                 Backspace,   Alt Left

高亮地址栏内容F6, Ctrl L, Alt D                  Cmd L, Alt D

在地址栏输入一个 ? 后可以将它作为你的默认搜索引擎使用Ctrl K, Ctrl E                        Cmd K, Cmd E

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处：澳门新浦京娱乐场网站必知必会的小技巧，chro