我现在在调试代码的时候基本用的都是console.log() 调试法，虽然低级，但好用呀。当然，遇到复杂点的就会借助其它工具，但日常开发中 console.log() 基本够用了。
前缀铺垫的差不多了，今天我们来看看 console.log() 中还有哪些花里胡哨的写法。
使用F12, Ctrl|打开浏览器 DevTools Cmd+ Shift+ I，或cmd+ option+j和跳跃。
1. 使用 ES6 解构赋值的输出变量名
如果打印多个值的，为了区别我们一般会连同变量名打印出来:
const x = 42;
console.log('variableX:', variableX);
// or
console.log(`variableX: ${ variableX }`);
/*
output:
variableX: 42
*/
一个更快的选择是使用 ES6 对象解构赋值。
console.log({ variableX });
/*
output:
{ variableX: 42 }
*/
2. 使用适当的日志消息类型
console.log() 一般用法：
console.log('no-frills log message');
但它不是唯一的类型。消息可以归类为information（其处理方式与 console.log()相同）：
console.info('this is an information message');
警告：
console.warn('I warned you this could happen!');
错误：
console.error('I'm sorry Dave, I'm afraid I can't do that');
或不太重要的调试消息：
console.debug('nothing to see here - please move along');
console.table() 可以以更友好的格式输出对象值：
const obj = {
propA: 1,
propB: 2,
propC: 3
};
console.table( obj );
通过单击关联的标题，可以将表格按属性名称或值顺序排序。
console.table() 也可以用于一维或多维数组：
const arr1 = [
[ 1, 2, 3 ],
[ 4, 5, 6 ],
[ 7, 8, 9 ]
];
console.table( arr1 );
或对象数组：
const arr2 = [
{ a: 1, b: 2, c: 3 },
{ a: 4, b: 5, c: 6 },
{ a: 7, b: 8, c: 9 }
];
console.table( arr2 );
其他选项包括：
console.dir( obj )显示 JavaScript 对象中的交互式属性列表console.dirxml( element )显示来自指定 HTML 或 XML 节点的后代元素的交互式树console.clear()清除所有先前消息的控制台。
3. 过滤日志消息
浏览器以适当的颜色显示日志消息，但也可以过滤它们以显示特定类型。单击控制台窗格左上角的图标可打开 Chrome 的侧边栏：
注意，console.debug()信息只有在查看 verbose 选项时才会显示。
4.使用printf-type消息
所有的日志类型都可以使用c 语言风格的printf消息格式，该格式定义了一个模板，其中包含一个变量被替换的%指示器。例如
console.log(
'The answer to %s is %d.',
'life, the universe and everything',
42
);
// The answer to life, the universe and everything is 42.
5. 记录风格
可以使用作为任何消息类型的第二个参数中的字符串传递的标准 CSS 来设置日志消息的样式。%c消息中的标记指示将应用样式的位置，例如
console.log(
'%cOK, things are really bad now!',
`
font-size: 2em;
padding: 0.5em 2em;
margin: 1em 0;
color: yellow;
background-color: red;
border-radius: 50%;
`
);
DevTools 控制台中的结果：
6. 使用类似测试的断言
类似于console.assert()命令可用于在条件失败时输出消息。断言可以使用一个条件来定义，当该条件失败时，后跟一个或多个要输出的对象，例如
console.assert(
life === 42,
'life is expected to be',
42,
'but is set to',
life
);
或者，可以使用一个消息和替换值：
console.assert(
life === 42,
'life is expected to be %s but is set to %s',
42,
life
);
当条件失败时，这两个选项都显示断言错误：
7. 运行堆栈跟踪
可以使用以下命令输出构成当前执行点的所有函数调用的日志console.trace()：
function callMeTwo() {
console.trace();
return true;
}
function callMeOne() {
return callMeTwo();
}
const r = callMeOne();
跟踪显示每次调用是哪一行，并且可以在控制台窗格中折叠或展开：
8. 分组日志消息
日志消息可以console.group( label )在开始和console.groupEnd()结束时分成命名组。消息组可以嵌套、折叠或展开（console.groupCollapsed( label )最初显示处于折叠状态的组）：
// start log group
console.group('iloop');
for (let i = 3; i > 0; i--) {
console.log(i);
// start collapsed log group
console.groupCollapsed('jloop');
for (let j = 97; j < 100; j++) {
console.log(j);
}
// end log group (jloop)
console.groupEnd();
}
// end log group (iloop)
console.groupEnd();
9. 使用性能计时器
该time( label )命令启动一个计时器。当timeEnd( label )到达相关命令时，以毫秒为单位报告经过的时间。计时器可用于评估操作的性能——它比管理自己的Date()计算更容易、更准确，例如
// start timer
console.time('bigloop');
for (let i = 999999999; i > 0; i--);
// show elapsed time
console.timeEnd('bigloop');
一个页面最多可以添加 10,000 个计时器，并且该console.timeLog( label )命令将报告经过的时间而不停止计时器。
一个类似的选项是console.count( label )报告命令被调用的次数。console.countReset( label )将命名计数器重置为零。
10.按名称调试和监控功能
DevTools Sources面板（或Firefox 中的Debugger）允许您通过单击行号来打开文件并设置断点。基于 Chrome 的浏览器还允许您通过debug( functionName )在控制台中输入来设置断点，例如
debug( doSomething );
该函数必须在全局命名空间中可用，并且浏览器将在调用后立即启动调试器。可以使用undebug( functionName )或通过重新加载页面来取消调试。
的monitor( functionName )和其相关联的unmonitor( functionName )命令被以类似的方式使用。他们没有停止执行，而是记录对函数的每次调用并显示传递的参数：
function doSomething called with arguments: "hello", 2
11. 查找并修复事件监听器
Firefox DevTools Inspector面板会在任何附加了处理程序的 DOM 元素旁边显示一个事件图标。单击图标查看函数名称，然后单击左侧的箭头图标展开代码。或者，在调试器中打开图标在调试器窗格中定位处理程序，以便您可以设置断点：
Chrome 的实现不是那么好，但是您可以通过将 DOM 节点传递给getEventListeners()函数来查看所有事件侦听器。例如，getEventListeners( $0 )显示应用于当前在Elements面板中突出显示的 DOM 节点的侦听器：
12.复制属性到剪贴板
控制台的copy()命令可以复制任何值到剪贴板。它可以是一个原始值、数组、对象或DOM节点。
当传递一个DOM节点时，copy()将该元素及其所有子元素的HTML放在剪贴板上。这与右键点击一个节点并选择复制，然后选择复制外层HTML是一样的。
命令 copy( document.documentElement ) 复制整个 HTML 文档。这可以粘贴到文本编辑器中并进行美化增强可读性。
生产应用程序的可观察性
在生产中调试 JavaScript 应用程序可能具有挑战性且耗时。OpenReplay 是面向开发人员的开源会话重放堆栈。它可以帮助您重播用户所做的一切，并显示您的应用程序如何针对每个问题进行行为和呈现。这就像在查看用户的肩膀时打开浏览器的检查器一样。
OpenReplay 通过重现问题，就像它们发生在您自己的浏览器中一样，有助于快速找到根本原因。它还通过捕获页面加载时间、内存消耗和慢速网络请求等关键指标来监控您的前端性能。
作者：Craig Buckler 译者：曾小呆 来源：.openreplay 原文：blog.openreplay.com/12-ways-to-…
