chrome使用小技巧

[Heqingsong]

常用快捷键

面板快捷键操作

打开开发者工具

• F12，Ctrl+Shift+I
• Cmd+Opt+I

打开开发者工具控制面板

• ctrl + shift + p

打开开发者工具并定位在Element面板

• Ctrl+Shift+C
• Cmd+Shift+C

打开开发者工具并把焦点放在控制台上

• Ctrl+Shift+J
• Cmd+Opt+J

面板切换

• Ctrl+] Ctrl+[
• Cmd+] Cmd+[

改变开发者工具停靠位置（内嵌或独立窗口）

• Ctrl+Shift+D
• Cmd+Shift+D

Elements 面板

打开移动设备调试模式

• Ctrl+Shift+M
• Cmd+Shift+M

刷新页面并清除缓存

• Ctrl+F5,Ctrl+Shift+R
• Cmd+Shift+R

在当前文件或面板中搜索文本

• Ctrl+F
• Cmd+F

在所有来源中搜索文本

• Ctrl+Shift+F
• Cmd+Opt+F

按文件名搜索 (时间轴除外)

• Ctrl+O,Ctrl+P
• Cmd+O,Cmd+P

放大缩小（当焦点在开发者工具上）

• Ctrl++ Ctrl+-
• Cmd+- Cmd+-

展开选中节点下所有子节点

• 选中节点,右键菜单expand recursively

浏览DOM结构

• [向上箭头] 键选择当前节点上方的节点
• [向下箭头] 键选择当前节点下方的节点
• [向右箭头] 键展开折叠的节点
• [向左箭头] 键折叠展开的节点

快速移动节点位置

• Ctrl + [向上|向下箭头]
• Cmd + [向上|向下箭头]

快速隐藏选中节点

• 在Elements面板 选中节点 + h键

编辑DOM节点名称或属性

• 选中节点,Enter键,再按Tab键直到选中名称或属性

保存更改的节点

• Ctrl+Enter
• Cmd+Enter

Sources 面板

跳转到指定行

• Ctrl+G
• Cmd+G

以文件名搜索

• Ctrl+O
• Cmd+O

Sources面板关闭活动的标签

• Alt+W
• Opt+W

运行代码片段

• Ctrl+Enter
• Cmd+Enter

转到匹配的括号

• Ctrl+M

找到相同的内容

• Ctrl+D
• Cmd+D

Console 面板

清空控制台

• Ctrl+L
• Cmd+K,Opt+L

将HTML对象转换为JS对象

• console.dir(document.body);

将对象以XML的方式显示

• console.dirxml(document.body);

使用CSS格式化输出内容

• console.log('%c测试文字', 'color: red;font-size: 2em;');

使用表格的方式显示JSON数据

• console.table([{a: 0, b: 0}, {a: 1, b: 1}]);

打印堆栈跟踪

• console.trace();

输出更容易读的日志信息

var a = 1, b = 2, c = 3;
console.log(a,b,c);  // 1 2 3
console.log({a, b, c}); // {a: 1, b: 2, c: 3}
console.table({a,b,c});

开启任务管理器

• Shift + Esc