chromeDev快捷键总结

Chrome

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

快捷键

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

打开DevTools

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

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

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

功能Windows / LinuxMac

打开 Chrome DevToolsF12, Ctrl + Shift + I     Cmd + Opt + I

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

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

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

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

全部面板

功能Windows / LinuxMac

打开 General Settings 对话框?, F1?

下一个面板Ctrl + ]    Cmd + ]

上一个面板Ctrl + [    Cmd + [

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

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

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

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

刷新页面F5, Ctrl + R    Cmd + R

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

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

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

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

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

放大Ctrl + +Shift + +

缩小Ctrl + -Shift + -

元素(Elements) 面板

功能Windows / LinuxMac

撤销改动Ctrl + Z   

恢复改动Ctrl + Y        Cmd + Shift + Z

导航Up, DownUp, Down

伸缩展开元素Right, LeftRight, Left

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

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

隐藏元素    H

切换编辑为HTML     F2

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

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

为元素设置断点(子元素修改,属性更改,元素删除)

清除 console

样式(Styles) 侧边栏

功能Windows / LinuxMac

编辑规则单击单击

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

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

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

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

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

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

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

增大 / 减小属性值 (最小单位 10 )Shift + Up,   Shift + DownShift + Up,   Shift + Down

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

增大 / 减小属性值 (最小单位 100)Shift + PgUp,    Shift + PgDown    Shift + PgUp,    Shift + PgDown

增大 / 减小属性值 (最小单位 0.1)Alt + Up,    Alt + Down   Opt + Up,    Opt + Down

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

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

资源(Sources)面板

功能Windows / LinuxMac

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

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

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

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

Select next call frameCtrl + .Opt + .

Select previous call frameCtrl + ,Opt + ,

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

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

Delete individual wordsAlt + DeleteOpt + Delete

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

保存本地的更改Ctrl + S    Cmd + S

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

跳转到某行Ctrl + G    Ctrl + G

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

跳转到某行(Jump to line number)Ctrl + P + :     Cmd + P + :

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

打开 member    Ctrl + Shift + O      Cmd + Shift + O

切换 console 并评估( evaluate?) Sources 面板中选中的代码Ctrl + Shift + ECmd + Shift + E

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

运行代码片段Ctrl + Enter     Cmd + Enter

切换注释Ctrl + /    Cmd + /

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

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

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

Timeline Panel

功能Windows / LinuxMac

开启/停止 记录Ctrl + E    Cmd + E

保存时间轴数据Ctrl + S   Cmd + S

加载时间轴数据Ctrl + O   Cmd + O

Profiles Panel

功能Windows / LinuxMac

开启/停止 记录Ctrl + E   Cmd + E

Console

功能Windows / LinuxMac

下一个建议TabTab

上一个建议Shift + Tab                    Shift + Tab

接受建议RightRight

上一个命令/行Up            Up

下一个命令/行Down        Down

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

多行输入Shift + Enter                 Ctrl + Return

执行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

推荐阅读更多精彩内容