JavaScript控制台的更多功能


Posted in Javascript onApril 28, 2021

概述

你可能在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控制台的更多功能的详细内容,更多关于JavaScript控制台的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
Javascript 事件流和事件绑定
Jul 16 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
深入理解JavaScript编程中的同步与异步机制
Jun 24 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
three.js 制作动态二维码的示例代码
Jul 31 Javascript
JavaScript使用canvas绘制坐标和线
JS Object构造函数之Object.freeze
Apr 28 #Javascript
关于vue中如何监听数组变化
vue实现简单数据双向绑定
Apr 28 #Vue.js
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 #Javascript
vue引入Excel表格插件的方法
Apr 28 #Vue.js
react如何快速设置文件路径别名
You might like
在线增减.htpasswd内的用户
2006/10/09 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
javascript中闭包closure的深入讲解
2021/03/03 Javascript
Python实现字符串格式化输出的方法详解
2017/09/20 Python
python skimage 连通性区域检测方法
2018/06/21 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
高三历史教学反思
2014/01/09 职场文书
高中运动会广播稿
2014/01/21 职场文书
会务接待方案
2014/02/27 职场文书
进口业务员岗位职责
2014/04/06 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
开会通知
2015/04/20 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
Java移除无效括号的方法实现
2021/08/07 Java/Android