一、全局快捷键
1、打开开发者工具
<code>F12</code>、<code>Ctrl + Shift + I</code>或<code>Ctrl + Shift + J</code>打开并聚焦于console面板
2、打开、关闭开发者工具设置对话框
<code> F1 </code>、<code>?</code>打开
<code>ESC</code>关闭
3、切换面板
<code>Ctrl + ]</code>切换到下一个面板
<code>Ctrl + [</code>切换到上一个面板
<code>Ctrl + Alt + [</code>切换到上一个使用的面板,类似于后退
<code>Ctrl + [</code>切换到后一个使用的面板,类似于前进
面板
4、更改开发者工具停靠位置
<code>Ctrl + Shift + D</code>在最近使用的两个停靠模式来回切换
5、打开设备模式
<code>Ctrl + Shift + M</code>便于响应式调试
设备模式
6、刷新当前网页
<code>F5</code>、<code>Ctrl + R</code>简单刷新
<code>Ctrl + F5</code>、<code>Ctrl + Shift + R</code>忽略缓存,全部刷新
7、搜索
<code>Ctrl + F</code>在当前文件或面板中搜索
<code>Ctrl + Shift + F</code>在所有资源中搜索
<code>Ctrl + O</code>、<code>Ctrl + P</code>搜索文件
8、放大、缩小、还原
<code>Ctrl + +</code>放大
<code>Ctrl + -</code>缩小
<code>Ctrl + 0</code>还原
二、Elements面板
1、修改、撤销
<code>Ctrl + Z</code>撤销你的修改
<code>Ctrl + Y</code>还原你的修改
2、导航
<code>↑</code>上一个同级元素
<code>↓</code>下一个同级元素
3、展开或关闭元素(选中元素后)
<code>→</code>展开元素
<code>←</code>关闭元素
4、隐藏元素(选中元素后)
<code>H</code>
5、编辑属性
<code>Enter</code>
6、像html一样编辑元素
<code>F2</code>
7、Style侧边栏相关
(1)切换至上一个/下一个属性,便于修改调试(选中一个属性后)
<code>Tab</code>下一个属性
<code>Shift+Tab</code>上一个属性
修改属性 、
(2)属性值的增加与减少
<code>↑</code>值增加
<code>↓</code>值减少
<code>Shift + ↑</code>、<code>Shift + Pgup</code>值每次增加10
<code>Shift + ↓</code>、<code>Shift + Pgdn</code>值每次减少10
<code>Alt + ↑</code>值每次增加0.1
<code>Alt + ↓ </code>值每次减少0.1
三、Sources面板
1、注释一行或者选中的代码(选中某个文件、光标悬停于该文件)
<code>Ctrl + /</code>
2、跳至某一行
<code>Ctrl + G</code>
3、运行代码片段(Snippets)
<code>Ctrl + Enter</code>
4、跳至相对应的括号
<code>Ctrl + M</code>
跳至相对应的括号
四、Timeline面板
1、开始/停止记录
<code>Ctrl + E</code>
2、保存Timeline数据
<code>Ctrl + S</code>
3、加载Timeline数据
<code>Ctrl + O</code>
五、Profile面板
1、开始/停止记录
<code>Ctrl + E</code>
六、Console面板
1、接受代码提示
<code>→</code>、<code>Tab</code>
2、上一条命令/代码
<code>↑</code>
3、清空控制台
<code>Ctrl + L</code>
4、多行输入
<code>Shift + Enter</code>
5、执行命令/代码
<code>Enter</code>
七、chrome快捷键
1、打开一个新的窗口
<code>Ctrl + N</code>普通模式打开
<code>Ctrl + Shift + N</code>以隐身模式打开
2、打开/隐藏工具栏
<code>Ctrl + Shift + B</code>
3、查看历史记录
<code>Ctrl + H</code>
4、查看下载
<code>Ctrl + J</code>
5、查看chrome任务管理器
<code>Shift + ESC</code>
6、选择web地址
<code>F6</code>、<code>Ctrl + L</code>、<code>Alt + D</code>
7、利用搜索引擎搜索
<code>Crtl + K</code>、<code>Ctrl + E</code>