有一家神奇的公司叫做Google，有一个强大的浏览器称为chrome。从以前使用firefox的插件firebug转战chrome调试已有些日子，不得不说，chrome的调试简单、强大，当然如果知道以下的快捷键将会使前端开发事半功倍。
快捷键
DevTools具有一些内建的快捷键，开发者可以在日常的开发过程中使用它们以节约时间。以下列举的是每个快捷方式在Windows / Linux和Mac下相应的快捷键。有些快捷键是在全局有效的，而有些只是在某一个面板生效，and are broken up based on where it can be used.
在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 + -
功能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
功能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样式规则
功能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 (正常情况下是你想要的那个)
功能Windows / LinuxMac
开启/停止 记录Ctrl + E Cmd + E
保存时间轴数据Ctrl + S Cmd + S
加载时间轴数据Ctrl + O Cmd + O
功能Windows / LinuxMac
开启/停止 记录Ctrl + E Cmd + E
功能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 消息
功能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 快捷键在日常使用中非常有用，它并不是特意为 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
