Chrome浏览器的开发工具是个强大的IDE，只是我们平时总忽略它。

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

打开DevTools

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

• 打开 Chrome DevTools：F12, Ctrl + Shift + I
• 打开／切换 审查元素模式和浏览模式：Ctrl + Shift + C
• 打开 Chrome DevTools ,并聚焦在 console 上：Ctrl + Shift + J
• 审查审查器 (取消第一个审查器的停靠后再按键)：Ctrl + Shift + J

全部面板

• 上/下一个面板：Ctrl + [/]
• 打开/关闭 Console 或 关闭设置对话框：esc
• 强制刷新页面，清除缓存内容：Ctrl + F5
• 当前文件或标签页搜索文字：Ctrl + F
• 所有资源中搜索文字：Ctrl + Shift + F

元素(Elements) 面板

• 伸缩展开元素：Right, Left
• 切换编辑为HTML：F2

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

1. 强制元素在某个伪类状态: (:active, :hover, :focus, :visited)
2. 为元素设置断点（子元素修改，属性更改，元素删除）
3. 清除 console

样式(Styles) 侧边栏

• 跳转到样式规则属性在样式表的行数：Ctrl + 单击某个CSS属性
• 跳转到属性值在样式表的行数：Ctrl + 单击某个CSS属性值
• 查看自动填充建议：Ctrl + 空格
• 编辑下一个 / 上一个属性：Tab, Shift + Tab

资源(Sources)面板

• 中断/恢复脚本执行：F8
• 跳过下一个函数：F10
• 跳入下一个函数：F11
• 跳出当前函数：Shift + F11