JavaScript控制台的更多功能
作者:浅笑· 发布时间:2024-02-24 12:46:42
概述
你可能在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对象。它们可以帮我们进行开发,以便可以根据类型过滤消息;查看表中的一项或多项;或者将它们组合在一起或折叠它们,以便在需要时将其隐藏。它将改善你的工作流程。
来源:https://www.cnblogs.com/qianxiaox/p/13821883.html


猜你喜欢
- <?php //作者:遥远的期待 //QQ:15624575 //算法分析:1、必须是整数序列、2、如果整个序列不全是负数,最大子序列
- 在日常的工作中,我们通常会有去探测目标主机是否存活的应用场景,单个的服务器主机可以通过计算机自带的DOS命令来执行,但是业务的存在往往不是单
- 前言当我们的项目达到一定的规模时,对于某些组件来说,我们并不希望一开始全部加载,而是需要的时候进行加载;这样的做得目的可以很好的提高用户体验
- 一个能对访问者进行编号、记录访问次数、IP、时间的统计制作实例我以ACCESS库为例子,其实用SQL SERVER库也只要改一下链接库的语句
- 1,使用mysqldump时报错(1064),这个是因为mysqldump版本太低与当前数据库版本不一致导致的。mysqldump: Cou
- 先给大家说下什么是localstorage前几天在老项目中发现有对cookie的操作觉得很奇怪,咨询下来是要缓存一些信息,以避免在URL上面
- scipyscipy包包含致力于科学计算中常见问题的各个工具箱。它的不同子模块相应于不同的应用。像插值,积分,优化,图像处理,,特殊函数等等
- 学了几天正则,差不多该总结整理写成果了,之前就想写语法高亮匹配来着,不过水平不够,看着例子都不理解。那么我们来分析下两位大神 次碳酸钴 和
- 这篇文档所给出的编码约定适用于在主要的Python发布版本中组成标准库的Python 代码,请查阅相关的关
- 物化表首先提出一个不相关的IN子查询SELECT * FROM s1 WHERE key1 IN (SELECT common_field
- 问题你想自己去实现一个新的上下文管理器,以便使用with语句。解决方案实现一个新的上下文管理器的最简单的方法就是使用 contexlib 模
- asp+js做的一个dig程序中的投票(有的叫顶一下,踩一下),由于代码较长,只贴出核心部分:投票中的代码相关文章推荐:ajax +asp
- 在用python绘图的时候,经常由于数据的原因导致画出来的图折线分界过于明显,因此需要对原数据绘制的折线进行平滑处理,本文介绍利用插值法进行
- 如下所示:import osos.system()os.popen().read().strip()#上面2种方法 是python 执行终端
- Web抓取Web站点使用HTML描述,这意味着每个web页面是一个结构化的文档。有时从中 获取数据同时保持它的结构是有用的。web站点不总是
- sql server 全文检索有两种搜索方式,一种是contains,另一种是freetext。前者是包含,类似于 like '%关
- 下载下面提供两种下载地址,官网地址一般为最新的,网盘地址会定期更新,但是不保证一定是最新的官网下载地址:https://www.jetbra
- 一、python线程的模块1.1 thread和threading模块thread模块提供了基本的线程和锁的支持threading提供了更高
- 之前看到Amily的一篇文章,用Excel快速实现分列转到行的操做。数据源大致是这样的:基于此,我动起了一个念头:看看如何用Python快速
- CKeditor编辑器是FCKeditor的升级版本想对于FCK来说,确实比较好用,加载速度也比较快以下是如果通过JS获取CKeditor编