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 this指针
Jul 30 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
关于js datetime的那点事
Nov 15 Javascript
javascript计时器详解
Feb 28 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 Javascript
浅析javascript中的事件代理
Nov 06 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
JS事件流与事件处理程序实例分析
Aug 16 Javascript
原生js canvas实现鼠标跟随效果
Aug 02 Javascript
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
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
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
基于php无限分类的深入理解
2013/06/02 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
php魔术变量用法实例详解
2014/11/13 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
node.js中的require使用详解
2014/12/15 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
python如何导入依赖包
2020/07/13 Python
HTML5 CSS3给网站设计带来出色效果
2009/07/16 HTML / CSS
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
某科技软件测试面试题
2013/05/19 面试题
电子商务专业个人的自我评价
2013/12/19 职场文书
优秀中学生事迹材料
2014/01/31 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
vue递归实现树形组件
2022/07/15 Vue.js