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间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
node.js下LDAP查询实例分享
Sep 30 Javascript
7个jQuery最佳实践
Jan 12 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
vue监听对象及对象属性问题
Aug 20 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
jquery实现穿梭框功能
Jan 19 jQuery
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 单引号与双引号的区别
2009/11/24 PHP
PHP版 汉字转码的实现详解
2013/06/09 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
JSON取值前判断
2014/12/23 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
深入理解js中this的用法
2016/05/28 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
2020/07/19 Javascript
完美解决在oj中Python的循环输入问题
2018/06/25 Python
python机器学习之神经网络实现
2018/10/13 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
django实现后台显示媒体文件
2020/04/07 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
python实现控制台输出颜色
2021/03/02 Python
十八大观后感
2015/06/12 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
MySQL分区表管理命令汇总
2022/03/21 MySQL