如何超越console.log并充分利用浏览器的调试控制台

by Gilad Dayagi

通过吉拉德·达亚吉

The console object is a very useful feature of browsers that has been around for many years. It provides access to the browser’s debugging console.Most web developers know how to print messages to the console using console.log. But I’ve found that many don’t know about other features of the console, even though they can be very useful for every web developer.

console对象是已经存在多年的浏览器的一项非常有用的功能。 它提供对浏览器调试控制台的访问。大多数Web开发人员都知道如何使用console.log将消息打印到控制台。 但是我发现许多人都不知道console其他功能，即使它们对于每个Web开发人员都非常有用。

In this post, I’ll go over some of these lesser known features and capabilities. I hope that you will find them useful and interesting, and will incorporate them into your day to day workflow and code.

在本文中，我将介绍一些鲜为人知的功能。 我希望您会发现它们有用且有趣，并将它们纳入您的日常工作流程和代码中。

I added a screenshot of the result of each example. If you want to try things for yourself, just open the DevTools and copy-paste the examples.

我添加了每个示例结果的屏幕截图。 如果您想自己尝试，只需打开DevTools并复制粘贴示例即可。

使用多个参数 (Using multiple arguments)

It is quite common to log several values together. These may be a message along with a related value or the content of several related variables.

将多个值记录在一起是很常见的。 这些可能是一条消息以及相关值或几个相关变量的内容。

Here are two ways I’ve seen developers achieve this:

我见过开发人员实现此目标的两种方法：

1.字符串串联 (1. String concatenation)

const a = 123;const b = 'abc';const c = {aa: 234, bb: 345};console.log('Foo bar ' + a + ' ' + b + ' ' + c);

2.使用多个通话 (2. Using multiple calls)

const a = 123;const b = 'abc';const c = {aa: 234, bb: 345};console.log('Foo bar');console.log(a);console.log(b);console.log(c);

These methods may work (sort of), but:

这些方法可能有效(但)，但：

• They are not flexible
  他们不灵活
• They are not very readable
  他们不是很可读
• They are cumbersome to write
  他们写起来很麻烦
• They need special means to work properly with object variables
  他们需要特殊的方法才能正确处理对象变量

There are several better alternatives for outputting many variables. The most useful one for quick data dump is sending multiple arguments to console.log, like so:

对于输出许多变量，有几种更好的选择。 快速数据转储最有用的方法是将多个参数发送到console.log ，如下所示：

const a = 123;const b = 'abc';const c = {aa: 234, bb: 345};console.log('Foo bar', a, b, c);

This is very handy for debugging, but the output is not very controllable. For output that is intended to be read (like for a library), I would use a different method, which we’ll get to later on.

这对于调试非常方便，但是输出不是很可控。 对于要读取的输出(例如对于库)，我将使用其他方法，稍后将进行介绍。

使用不同的日志级别 (Using different log levels)

Besides the familiar console.log, there are other logging methods that correspond to different log levels:

除了熟悉的console.log ，还有其他日志记录方法对应于不同的日志级别：

console.debug('Debug message');console.info('Info message');console.log('Good old log message');console.warn('A warning message');console.error('This is an error');

Each log level may have a different default style, which makes spotting errors and warnings at a glance easier.

每个日志级别可能具有不同的默认样式，这使发现错误和警告一目了然。

You can usually also filter which log levels you want to be visible in the DevTools console. This may help reduce clutter.

通常，您还可以过滤要在DevTools控制台中显示的日志级别。 这可能有助于减少混乱。

The appearance of the different levels and the filtering granularity changes from browser to browser.

不同级别的外观和过滤粒度随浏览器的不同而变化。

分组控制台行 (Grouping console lines)

Some times it is useful to group log messages together. It may allow for more organised and readable output.

有时将日志消息分组在一起很有用。 它可能允许更有组织性和可读性的输出。

This is actually very simple to achieve:

这实际上很容易实现：

console.group();console.log('First message');console.log('Second message');console.groupEnd();

Note that log groups can also be nested and labeled:

请注意，日志组也可以嵌套和标记：

console.group('Group aaa');console.log('First message');console.group('Group bbb');console.log('level 2 message a');console.log('Level 2 message b');console.groupEnd();console.log('Second message');console.groupEnd();

In case you want the group to appear collapsed, use console.groupCollapsed()

如果您希望组显示为折叠状态，请使用console.groupCollapsed()

衡量绩效 (Measuring performance)

Measuring the time between points in the code can serve as a quick way to check the performance of some operations.

测量代码中两点之间的时间可以用作检查某些操作性能的快速方法。

Here is a trivial way to do this:

这是一种简单的方法：

const start = Date.now();// do some stuffconsole.log('Took ' + (Date.now() - start) + ' millis');

This works, but there’s a more elegant way to achieve something similar:

这行得通，但是有一种更优雅的方法可以实现类似的目的：

console.time('Label 1');// do some stuffconsole.timeEnd('Label 1');

The code is shorter, the measurement is more accurate, and you can keep track of up to 10,000 different timers in parallel on a page.

代码更短，测量更准确，并且您可以在一个页面上并行跟踪多达10,000个不同的计时器。

字符串替换 (String substitution)

Previously we learned that you can pass multiple arguments to console.log to output multiple values simultaneously. Another way to achieve something similar is to use string substitution. This method requires familiarity with the available placeholders, but offers greater control over the output.

先前我们了解到可以将多个参数传递给console.log来同时输出多个值。 实现类似目的的另一种方法是使用字符串替换。 此方法需要熟悉可用的占位符，但可以更好地控制输出。

const a = 123;const b = 'abc';const c = {aa: 234, bb: 345};console.log('number %d string %s object %o', a, b, c);

Take a look at the documentation (link in the end) for a list of available placeholders.

查看文档(末尾链接)以获取可用占位符列表。

造型 (Styling)

It can be nice to style different log messages differently to increase readability.

为不同的日志消息设置不同的样式以提高可读性可能会很好。

We already mentioned that browsers give different default styling to some log levels, but this can also be customized according to your specific needs. Styling is done using a subset of CSS rules, passed in a string as the second parameter, and applied using the marker %c.

我们已经提到过，浏览器为某些日志级别提供了不同的默认样式，但是也可以根据您的特定需求进行自定义。 样式是使用CSS规则的子集完成的，将字符串作为第二个参数传递，并使用标记%c 。

Note that you can have different styles for different parts of the log message.

请注意，日志消息的不同部分可以具有不同的样式。

For example:

例如：

console.log("Normal %cStyled %clorem %cipsum", "color: blue; font-weight: bold", "color: red", "background-image: linear-gradient(red, blue); color: white; padding: 5px;");

摘要 (Summary)

In this post we have seen some of the features of console that I think are less well-known and more useful. This is by no means an exhaustive list of everything the console can do, as it has many more tricks up its sleeve.

在这篇文章中，我们看到了一些console功能，我认为这些功能较不为人所知，但更有用。 这绝不是console可以做的所有事情的详尽清单，因为它还有很多技巧。

If this got you interested and you want to find out what other things you can do with the console, I recommend reading the relevant documentation on MDN and trying things out in DevTools.

如果这引起了您的兴趣，并且您想了解console还可以做些什么，我建议您阅读有关MDN的相关文档，并尝试在DevTools中进行尝试。

If you found this useful please share this article on social media.You can also follow me on twitter (@giladaya). Thanks for reading!

如果您觉得这很有用，请在社交媒体上分享此文章。 您也可以在Twitter(@giladaya)上关注我。 谢谢阅读！

翻译自: https://www.freecodecamp.org/news/how-to-go-beyond-console-log-and-get-the-most-out-of-your-browsers-debugging-console-e185256a1115/