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实现切换页面布局使用介绍
Oct 09 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
BootStrap的双日历时间控件使用
Jul 25 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
swiper自定义分页器的样式
Sep 14 Javascript
HTML+JS实现在线朗读器
Feb 15 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
用php实现的下载css文件中的图片的代码
2010/02/08 PHP
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
mongodb和php的用法详解
2019/03/25 PHP
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
详解vue父子模版嵌套案例
2017/03/04 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
web.py获取上传文件名的正确方法
2014/08/26 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
如何验证python安装成功
2020/07/06 Python
Python实现手势识别
2020/10/21 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
电脑饰品店的创业计划书
2014/01/21 职场文书
环保建议书300字
2014/05/14 职场文书
团队口号大全
2014/06/06 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python