很多朋友都对“JavaScript控制台更多功能包括什么，怎么实现”的内容比较感兴趣，对此小编整理了相关的知识分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获，那么感兴趣的朋友就继续往下看吧！

概述

你可能在JavaScript项目中都用了console.log。这是一种查看变量的值或程序运行中发生的事情的便捷方法。但是JavaScriptconsole 对象还有许多其他的功能，可以在处理项目时提供帮助。本文将会介绍一些我的最爱，希望你在工作时记得使用它们！

请注意，此处的例子适用于在浏览器中运行的 JavaScript。这与在 Node.js中运行的 JavaScript 相似，但是在 Node.js中的行为可能略有不同。

console.log

在进入其他选项之前，让我们先回顾一下 console.log 的功能。console.log将消息输出到控制台。你可以输入一个对象、一个数组、一个对象数组、一个字符串、一个布尔值，基本上你想要打印到控制台的任何内容都可以。这是使用console.log及其输出的例子：

console.log({ restaurantName: 'Pizza Planet' }); // { restaurantName: 'Pizza Planet' };

这是 JavaScript 中最常用的调试方法，也是最常用的控制台方法。现在让我们来谈谈其他的一些选择！

console.info

console.info与console.log几乎相同。它将信息性消息打印到控制台。据我所知，log和info之间并没有真正的区别，只是取决于你怎样对消息进行分类。但是如果你选择从浏览器控制台中隐藏 “info” 级别的消息，则 “log” 和 “info” 消息都会被隐藏。要使用console.info可以这样做：

console.log({ restaurantName: 'Pizza Planet' }); // { restaurantName: 'Pizza Planet' };

同样，输出几乎完全相同。

console.warn

console.warn将警告消息打印到控制台。从本质上讲，它与前面的功能相同，但是该消息在控制台中带有黄色背景，并带有警告图标（至少在 Chrome Dev Tools 中是这样）。当执行某些操作可能会导致你程序中的错误，但目前不会引起任何问题时，请使用console.warn。它使你和你的用户或其他开发人员知道那里有可能会发生问题。

console.warn({ restaurantName: 'Pizza Planet' }); //  { restaurantName: 'Pizza Planet' };

像前面一样，可以通过传递相同的值来把警告打印到控制台。

console.error

console.error将错误信息输出到控制台。本质上，它与前面的功能相同，但是该消息在控制台中具有红色背景，并带有带有白色 “x” 错误图标的红色圆圈（至少在 Chrome Dev Tools 中）。当你的程序出现问题时，请使用console.error。它为其他开发人员提供了一种简便的方法来找出问题的原因并加以解决。它将能够为你提供错误的堆栈跟踪信息，以便你也可以查找错误。

console.error({ restaurantName: 'Pizza Planet' }); //  { restaurantName: 'Pizza Planet' };

像前面一样，可以通过传递相同的值来把错误打印到控制台。

console.table

这是我最喜欢的控制台选项之一，尽管我经常忘记它。console.table接受一些能够以表格形式展示的数据并输出。让我们看几个例子。我们首先从对象上的console.table开始：

console.table({ restaurantName: 'Pizza Planet', streetAddress: '123 Maple' });

在dev tools中的输出看起来类似于此：

(index)	Value
restaurantName	Pizza Planet
streetAddress	123 Maple

它获取对象的每个属性名称，并将其放在index列中，并将属性的值放入Value列中。这发生在数组中的每个属性上。那么，如果我们输出对象数组会怎样？结果将如下所示：

(index)	restaurantName	streetAddress
0	Pizza Planet	123 Maple
1	Pizza Palace	123 Elm

我发现自己通常会使用console.log，因为我已经习惯了，但是我认为很多时候console.table会更好地工作，并以一种美观、干净、易读的方式为我输出对象。

console.assert

console.assert是一种将未满足你确定条件的消息打印到控制台的方法。该函数有两个参数：要求值的表达式和应显示的错误消息。这是一个例子：

const obj = { restaurantName: 'Pizza Planet' };
console.assert(obj.restaurantName === 'Pizza Palace', 'The name of the restaurant is not "Pizza Palace"');
//  Assertion Failed; 'The name of the restaurant is not "Pizza Palace"'

这可能是另一种非常好的调试程序的方法。仅当断言失败时才会显示该消息，因此如果未显示任何消息，则可以假定表达式正评估正确。

console.group 和 console.groupEnd

console.group和console.groupEnd是可以将许多 console.log 逻辑分组的方式。然后，你可以在需要时通过折叠组以将其隐藏。相当容易使用：

console.group();
console.log({ restaurantName: 'Pizza Palace' });
console.groupEnd();

该组可能会整体折叠。如果你需要在控制台上记录很多内容，这可能会很有用。

结论

在 JavaScript 中，有很多方法可以用于console对象。它们可以帮我们进行开发，以便可以根据类型过滤消息；查看表中的一项或多项；或者将它们组合在一起或折叠它们，以便在需要时将其隐藏。它将改善你的工作流程。

上述内容具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多"JavaScript控制台更多功能包括什么，怎么实现"的内容，大家可以关注群英网络的其它相关文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Vue中v-has指令应用场景是什么，如何使用

  这篇文章主要介绍了Vue自定义v-has指令,做按钮权限判断的步骤，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下

• 如何用原生JS给导航条添加特效效果

  这篇文章主要为大家详细介绍了JS实现网页导航条特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 微信小程序中的tab滑动切换效果如何做，代码是什么

  这篇文章主要为大家详细介绍了微信小程序自定义tab切换，可滑动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• J中如何获取焦点，及判断是否获取焦点的方法是什么

  这篇文章主要给大家分享 JavaScript中document.activeELement焦点元素介绍，下面文章围绕了document.activeElement属性展开详细内容,需要的朋友可以参考一下，希望对大家有所帮助

• 如何用JS写个完整的扫雷游戏，过程是什么

  目录前言一、思路分析二、静态页面搭建2.1 结构层2.2 样式层三、js页面交互3.1 获取元素及变量初始化3.2 10个雷的初始化设置3.3 游戏开始事件封装3.4 核心事件函数封装3.5