12 种方法改进您的 DevTools 控制台日志记录

作者：克雷格·巴克勒

很少有开发者会深入研究浏览器开发者工具的调试功能。这个看似不起眼的工具console.log()经常被人嘲笑，但我们都在使用它。它在代码运行时输出数值方面非常实用，通常有助于精确定位错误。

然而，在客户端脚本、Web Worker 和 Service Worker 中，还有许多未被充分利用的、更快、更简便且更有用的选项。其中许多选项也受 Node.js 和 Deno 运行时控制台的支持。

F12使用, Ctrl| 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');

但这并非唯一类型。消息还可以被归类为信息（其处理方式与消息相同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()模式时才会显示消息。

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%;
  `
);

开发者工具控制台中显示的结果：

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. 按名称调试和监视函数

开发者工具的“源代码”面板（或Firefox 中的“调试器”）允许您打开文件并通过单击行号来设置断点。基于 Chrome 的浏览器也允许您通过debug( functionName )在控制台中输入命令来设置断点，例如：

debug( doSomething );

该函数必须在全局命名空间中可用，浏览器会在调用该函数后立即启动调试器。可以使用 `--debug`undebug( functionName )或重新加载页面来取消调试。

及其monitor( functionName )相关unmonitor( functionName )命令的使用方式类似。它们不会中止执行，而是记录每次函数调用并显示传递的参数：

function doSomething called with arguments: "hello", 2

11. 查找并修复事件监听器

Firefox 开发者工具的检查器面板会在任何附加了事件处理程序的 DOM 元素旁边显示一个事件图标。单击该图标可查看函数名称，然后单击左侧的箭头图标展开代码。或者，单击“在调试器中打开”图标会将事件处理程序定位到调试器窗格中，以便您可以设置断点：

Chrome 的实现并不完美，但您可以通过将 DOM 节点传递给getEventListeners()函数来查看所有事件监听器。例如，getEventListeners( $0 )以下代码会显示应用于“元素”面板中当前高亮显示的 DOM 节点的监听器：

12. 将属性复制到剪贴板

控制台copy()命令可以将任何值复制到剪贴板。它可以是原始值、数组、对象或 DOM 节点。

传入一个 DOM 节点后，copy()该函数会将该元素及其所有子元素的 HTML 代码复制到剪贴板。这与右键单击节点并选择“复制” ，再选择“复制 outerHTML”的效果相同。

该命令copy( document.documentElement )会复制整个 HTML 文档。您可以将其粘贴到文本编辑器中并进行格式美化，以便更好地阅读标记。

生产应用的可观测性

在生产环境中调试 JavaScript 应用可能既困难又耗时。Asayer 是一款前端监控工具，它可以重现用户的所有操作，并显示应用在每个问题出现时的行为和渲染情况。它就像打开浏览器开发者工具，同时还能观察用户的操作一样。

Asayer 能够重现问题，就像在您自己的浏览器中发生一样，从而帮助您快速找到问题的根本原因。它还能通过捕获页面加载时间、内存消耗和慢网络请求等关键指标来监控您的前端性能。

祝您调试愉快！面向现代前端团队 -开始免费监控您的 Web 应用程序。

深入了解开发者工具

浏览器开发者工具已经从简陋的控制台发展成为功能强大的开发和调试环境。console.log()虽然它一直都很受欢迎，但其他选项或许能提供更快更便捷的途径，最终实现零缺陷！