乐趣区

关于javascript:提高-DevTools-控制台调试的-12-种方法

jiezi

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

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

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

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

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

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

const x = 42;

console.log('variableX:', variableX);
// or
console.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 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 查看器面板在任何附加了处理程序的 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。

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

退出移动版