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 相关文章推荐
jQuery 使用手册(一)
Sep 23 Javascript
IE与FireFox的JavaScript兼容问题解决办法
Dec 31 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 Javascript
微信小程序后端实现授权登录
Feb 24 Javascript
原生JavaScript实现购物车
Jan 10 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
人族 Terran 基本策略
2020/03/14 星际争霸
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
php include和require的区别深入解析
2013/06/17 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
layui的select联动实现代码
2019/09/28 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
Python 列表的清空方式
2020/01/13 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
方法名是否可以与构造器的名字相同
2012/06/04 面试题
专业实习自我鉴定
2013/10/29 职场文书
光盘行动倡议书
2014/02/02 职场文书
班主任经验交流材料
2014/12/16 职场文书
单位介绍信格式
2015/01/31 职场文书
《花钟》教学反思
2016/02/17 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
Python中的xlrd模块使用整理
2021/06/15 Python