Chrome开发者工具（简称DevTools）是一组网页制作和调试的工具，内嵌于Google Chrome浏览器中。通过使用DevTools，可以更加高效的定位页面布局问题，设置JavaScript断点并且更好的理解代码优化。
编写多行命令
控制台在多行编辑的模式下，你可以像在普通的文本编辑器中那样输入命令。 使用Shift + Enter 可以输入普通的换行符，而实现多行的编辑。
直接敲回车就可以运行代码。
快捷键打开审查元素模式
使用Ctrl + Shift + C 或 Cmd + Shift + C可以在DevTools中快速打开审查元素模式。(译注：可能会与系统快捷键冲突)
预览对象
通过log打印的对象可以直接在控制台中预览。
给控制台设置样式
你可以使用%c格式符，来为控制台增加样式：
console.log("%cBlue!", "color: blue;");
访问最近的控制台结果
在控制台输入$_可以获控制台最近一次的输出结果。继续以XPath表达式查询为例：
使用 console.time() 和 console.timeEnd() 分析循环的性能
调用console.time()开启一个计时器，调用 console.timeEnd()关闭计时器，并在终端输出计时器消耗的时间。计时器在分析循环这样的非函数内操作的时候还是蛮有用的。
注意：console.time() 与console.timeEnd();里面的要对应一致。
调试&DOM编辑
在元素上右键，选择 ‘Break on Subtree Modifications’: 当脚本遍历到该元素子节点并且进行修改操作时，断点调试器就会自动被触发。
同样值得注意的是设置“ Attribute modifications”选项可以在元素的inline style变化时触发调试器，这在调试DOM动画的时候很有用。
条件断点
DevTools支持条件断点，我们都知道在代码的行号上单击鼠标可以在当前行设置一个普通断点，程序执行到这里就会暂停。
(或者在页面js里写debugger与普通断点一样）。
接着，你可以在断点上右键然后选择 "Edit Breakpoint"，这样就可以看到一个表达式输入框。在里面可以定义条件，如果条件为True，断点就会生效。
一个通常的表达式可能是x === 5这种，然而在表达式写console.log语句也是完全OK的。
这个条件表达式可以正常的工作，并且我们可以很明显看到console.log语句在代码经过断点的时候执行了:
压缩代码显示为正常结构
一般web页面的代码都是minified压缩的。DevTools支持将代码格式化显示，使代码可读
- 前往Source面板选择你想要查看的JavaScript代码
- 接下来，点击"Pretty print" 按钮 (大概这个样子 {}）
之前
之后
检索元素上注册的事件
打开 Elements面板，在DOM树中用鼠标选中一个元素。注意：你也可以在控制台中使用getEventListeners(targetNode)选择。
接下来在右侧窗口，展开"Event Listeners"选项。在这里会看到，当前元素所绑定事件列表。
更加高效的处理断点
当你的程序在调试断点暂停的时候，你可以进行更多的操作：
你或许知道你可以通过 "Continue", "Step Over", "Step Into" 和 "Step Out" 控制程序执行，其实每一项功能都有对应的快捷键。学习这些快捷键操作可以在调代码的过程中更加高效。
Watch Expressions (在窗口的右侧)会实时的现实表达式的值，所以你无须切换到控制台去计算表达式(例如 X === Y)。
Call Stack (在Watch EXpressions下方)会列出当前系统已经执行函数调用到哪里了。
在 Scope Variables 部分, 你可以在任何函数上右键然后选择 "Jump to definition" 跳转到函数定义的位置。
DOM Breakpoints 会显示那些在 Elements面板被添加调试断点的元素。这个部分将帮助你观察那些事件是否已经成功的绑定到了元素上,以及事件被触发的时候执行了哪些操作。
XHR Breakpoints 的作用在于为XMLHttpReauest请求设置了断点，指定URL可以观察具体的异步请求情况。
原文详见：chrome DevTools中文手册
🧐加油~
