很多开发人员都只是略晓得一些浏览器 DevTool 调试的基础知识。

应用最多的 console.log() 对于在代码运行时输入值十分有用，通常能够帮忙查明谬误。

然而，还有一高级的用法还有很多人不晓得，所以并未失去充分利用，更快，更容易和更有用的高级的用法，这些高级的用法可用于客户端脚本，Web 工作人员和服务工作人员。

Node.js 和 Deno 运行时控制台也反对许多性能。

1. 应用 ES6 解构输入变量名称

当监督多个值时，日志记录可能会变得很简单。通常有必要增加更多信息，例如

const x = 42;console.log('variableX:', variableX);// orconsole.log(`variableX: ${ variableX }`);/*output:variableX: 42*/

更快的抉择是应用 ES6 对象销毁调配。这会将变量增加到具备匹配属性名称的对象。

换句话说，只有中央 { and } 括号一个变量来显示其名称和值：

console.log({ variableX });/*output:{ variableX: 42 }*/

2. 应用适当的日志音讯类型

console.log() 家喻户晓的最简略的办法：

console.log('no-frills log message');

但这不是惟一的类型。音讯能够归类为信息（与雷同解决 console.log() ）：

console.info('this is an information message');

warnings:

console.warn('I warned you this could happen!');

errors:

console.error('I\'m sorry Dave, I\'m afraid I can\'t do that');

或更不重要的 debug 调试音讯：

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

在 DevTools 控制台中的后果是：

6. 应用相似测试的断言

console.assert() 当条件失败时，能够应用相似 test 的命令来输入音讯。

能够应用条件定义断言，而后在该条件失败时输入一个或多个对象，例如

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 groupconsole.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 timerconsole.time('bigloop');for (let i = 999999999; i > 0; i--);// show elapsed timeconsole.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 查看器面板在任何附加了处理程序的 DOM 元素旁边显示一个事件图标。

单击该图标以查看性能名称，而后单击左侧的箭头图标以开展代码。

另外，“在调试器中关上” 图标可在 “调试器” 窗格中找到处理程序，因而你能够设置断点：

Chrome 的实现并不现实，然而您能够通过将 DOM 节点传递给 getEventListeners() 函数来查看所有事件侦听器。例如，getEventListeners( $0 ) 显示利用于“元素”面板中以后突出显示的 DOM 节点的侦听器：

12. 将属性复制到剪贴板

console copy() 命令能够将任何值复制到剪贴板。它能够是原始值，数组，对象或 DOM 节点。

传递 DOM 节点后，copy() 将该元素及其所有子元素的 HTML 搁置在剪贴板上。

等同于右键单击一个节点，而后抉择 “复制”，而后抉择 “复制内部HTML” 。

该命令将 copy( document.documentElement ) 复制整个 HTML 文档。能够将其粘贴到文本编辑器中，以不便浏览标记。

最初

浏览器 DevTools 已从根本控制台演变为简单的开发和调试环境。

console.log() 始终会很受欢迎，但其余选项可能会提供更快，更轻松的办法来实现零谬误！

本文翻译自文章：12 Ways to Improve Your DevTools Console Logging

往期精文

  • Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 我的项目配置最佳实际
  • TypeScript 中晋升幸福感的 10 个高级技巧
  • 举荐 7 个 Vue2、Vue3 源码解密剖析的重磅开源我的项目

欢送关注公众号： “全栈修炼”，回复 “电子书” 即能够取得上面 300 本技术精髓书籍哦，猫哥 wx：CB834301747 。

通过浏览本篇文章，如果有播种的话，能够点个赞和在看，这将会成为我继续分享的能源，感激～