阅读 462

改善 chrome 控制台(DevTools)日志记录的12种方法

很少有开发人员会超出浏览器DevTool调试的基础知识。谦虚console.log()常常被嘲笑,但我们所有人都在使用它。这对于在代码运行时输出值非常有用,通常可以帮助查明错误。

但是,还有一系列未得到充分利用,更快,更容易和更有用的选项,这些选项可用于客户端脚本,Web工作人员和服务工作人员。Node.js和Deno运行时控制台也支持许多功能。

与打开浏览器DevTools F12,Ctrl| Cmd+ Shift+I或cmd+ option+j并跳进去。

1.使用ES6解构分配输出变量名称

当监视多个值时,日志记录可能会变得很复杂。通常有必要添加更多信息,例如

console.log('variableX:', variableX);
// or
console.log(`variableX: ${ variableX }`);

/*
output:
variableX: 42
*/
复制代码

更快的选择是使用ES6对象销毁分配。这会将变量添加到具有匹配属性名称的对象。换句话说,只要地方{和}括号一个变量来显示其名称和值:


/*
output:
{ variableX: 42 }
*/
复制代码

2.使用适当的日志消息类型

console.log() 众所周知:

复制代码

但这不是唯一的类型。消息可以归类为信息(与相同处理console.log()):

复制代码

警告:

复制代码

错误:

复制代码

或更不重要的调试消息:

复制代码

console.table() 可以以更友好的格式输出对象值:

    propA: 1,
    propB: 2,
    propC: 3
  };

console.table( obj );
复制代码

image.png

通过单击关联的标题,可以将表分类为属性名称或值顺序。

console.table() 也可以用于一维或多维数组:

    [ 1, 2, 3 ],
    [ 4, 5, 6 ],
    [ 7, 8, 9 ]
  ];

console.table( arr1 );
复制代码

image.png

或对象数组:

    { a: 1, b: 2, c: 3 },
    { a: 4, b: 5, c: 6 },
    { a: 7, b: 8, c: 9 }
  ];

console.table( arr2 );
复制代码

image.png

其他选项包括:

console.dir( obj ) 在JavaScript对象中显示属性的交互式列表 console.dirxml( element ) 显示来自指定HTML或XML节点的后代元素的交互式树 console.clear() 清除控制台中所有以前的消息。

3.过滤日志消息

浏览器以适当的颜色显示日志消息,但也可以对其进行过滤以显示特定类型。单击控制台面板左上方的图标,可打开Chrome的侧栏:

image.png

请注意,console.debug()仅在查看详细选项时才会显示消息。

4.使用printf-type消息

所有日志类型都可以使用C样式的printf消息格式,该格式定义带有%指示符的模板,该指示符用于替换变量。例如:

  '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消息中的标记指示样式的应用位置,例如

  '%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控制台中的结果是:

image.png

6.使用类似测试的断言

console.assert()当条件失败时,可以使用类似test的命令来输出消息。可以使用条件定义断言,然后在该条件失败时输出一个或多个对象,例如

  life === 42,
  'life is expected to be',
  42,
  'but is set to',
  life
);
复制代码

或者,可以使用消息和替换值:

  life === 42,
  'life is expected to be %s but is set to %s',
  42,
  life
);
复制代码

当条件失败时,这两个选项都将显示断言错误:

image.png

7.运行堆栈跟踪

可以使用以下命令输出构成当前执行点的所有函数调用的日志console.trace():

  console.trace();
  return true;
}

function callMeOne() {
  return callMeTwo();
}

const r = callMeOne();
复制代码

跟踪显示了每个调用的行,可以在“控制台”窗格中折叠或展开该行:

image.png

8.日志消息分组

可以console.group( label )在开头和console.groupEnd()结尾使用来将日志消息分为命名组。消息组可以嵌套,折叠或展开(console.groupCollapsed( label )最初显示该组处于折叠状态):

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();
复制代码

image.png

9.使用计时器

该time( label )命令启动一个计时器。timeEnd( label )到达关联的命令后,将报告经过的时间(以毫秒为单位)。计时器可用于评估操作的性能-比管理自己的Date()计算更容易,更准确,例如

console.time('bigloop');

for (let i = 999999999; i > 0; i--);

// show elapsed time
console.timeEnd('bigloop');
复制代码

image.png

一个页面上最多可以添加10,000个计时器,并且该console.timeLog( label )命令将报告经过的时间而不会停止计时器。

一个类似的选项是console.count( label )报告命令被调用的次数。console.countReset( label )将命名计数器重置为零。

10.按名称调试和监视功能

DevTools Sources面板(或Firefox中的Debugger)允许您通过单击行号来打开文件并设置断点。基于Chrome的浏览器还允许您通过debug( functionName )在控制台中输入来设置断点,例如

复制代码

该函数必须在全局名称空间中可用,并且浏览器将在调用调试器后立即启动它。可以使用undebug( functionName )或通过重新加载页面来取消调试。

的monitor( functionName )和其相关联的unmonitor( functionName )命令被以类似的方式使用。他们没有停止执行,而是记录了对函数的每次调用并显示了传递的参数:

复制代码

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

Firefox DevTools检查器面板在任何附加了处理程序的DOM元素旁边显示一个事件图标。单击该图标以查看功能名称,然后单击左侧的箭头图标以展开代码。另外,“在调试器中打开”图标可在“调试器”窗格中找到处理程序,因此您可以设置断点:

image.png

Chrome的实现并不理想,但是您可以通过将DOM节点传递给getEventListeners()函数来查看所有事件侦听器。例如,getEventListeners( $0 )显示应用于“元素”面板中当前突出显示的DOM节点的侦听器:

image.png

12.将属性复制到剪贴板

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

传递DOM节点后,copy()将该元素及其所有子元素的HTML放置在剪贴板上。等同于右键单击一个节点,然后选择“复制”,然后选择“复制外部HTML”。

该命令将copy( document.documentElement )复制整个HTML文档。可以将其粘贴到文本编辑器中,以方便阅读标记。

文章分类
前端
文章标签