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 15 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
详解vue后台系统登录态管理
Apr 02 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 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
如何在PHP中进行身份认证
2006/10/09 PHP
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
Python对字符串实现去重操作的方法示例
2017/08/11 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
django使用channels实现通信的示例
2020/10/19 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
一些关于MySql加速和优化的面试题
2014/01/30 面试题
小学教育毕业生自荐信
2013/11/18 职场文书
机关保密承诺书
2014/06/03 职场文书
实习计划书范文
2015/01/16 职场文书
本溪关门山导游词
2015/02/09 职场文书
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle