浏览器控制台打印日志的方法汇总

目录

console.table用法

打印数组 

打印对象

打印数组对象

打印数组对象里的指定字段

console.count用法

不传参打印 

传参打印 

console.warn用法

  打印文本 

打印对象 

console.error用法

 打印文本 

打印对象 

console.assert用法

打印文本 

打印对象 

console.group用法

创建默认展开分组 

创建默认折叠分组 

console.time用法

console.trace用法

console.clear用法


console.table用法

console.table(tableData, tableColumns) 可在控制台将数据转化为表格形式输出,该方法接受两个参数:

  1. tableData(必填)需要输出的数据,数组或对象。

  2. tableColumns(可选)一个数组,元素为需要输出的列表。

打印数组 

const arr = ['第一个', '第二个', '第三个']
console.table(arr)

代码运行如下: 

打印对象

const test = {type: 'cat',action: 'eating',time: 20
}
console.table(test)

代码运行如下:

打印数组对象

const arr = [{ name: '张三', age: 25, single: true },{ name: '李四', age: 26, single: true },{ name: '王二麻', age: 27, single: false }
]
console.table(arr)

代码运行如下:

打印数组对象里的指定字段

const arr = [{ name: '张三', age: 25, single: true },{ name: '李四', age: 26, single: true },{ name: '王二麻', age: 27, single: false }
]
console.table(arr, ['age', 'single'])

代码运行如下:

console.count用法

console.count(label) 在控制台打印出调用次数,它接受一个参数:

  1. label(可选)制定标签的调用次数。

不传参打印 

console.count();

效果图如下: 

 

传参打印 

console.count("测试");
console.count("测试");
console.count("测试");

 效果如下:

console.warn用法

console.warn(message) 接受一个参数:

  1. message(必填)在控制台输出的警告内容,可文本或对象。

  打印文本 

console.warn('报错了')

代码效果如下:

打印对象 

console.warn({ msg: '报错了' })

 代码效果如下:

console.error用法

console.error(message) 接受一个参数:

  1. message(必填)在控制台输出的错误内容,可文本或对象。

 打印文本 

console.error('报错了')

代码效果如下:

打印对象 

console.error({ msg: '报错了' })

 代码效果如下:

console.assert用法

console.assert(expression, message) 该方法接受两个参数,第一个参数非false的情况下,输入第二个参数的错误内容。

  1. expression(必填)布尔表达式,返回 true 或 false。

  2. message(必填)在控制台输出的错误内容,可文本或对象。

打印文本 

console.assert(false, '报错了')

代码效果如下:

打印对象 

console.assert(false, { msg: '报错了' })

 代码效果如下:

console.group用法

console.group(label) 该方法会创建一个分组,后续打印的内容会折叠在这个分组内,需要配置 

console.groupEnd() 使用,代表着分组结束。console.groupCollapsed(label) 和 console.group(label) 功能一样,只是它创建的分组默认是折叠的。

  1. label(可选)分组的标签名称。

创建默认展开分组 

console.group('创建一个默认展开分组')
console.log("分组成员1")
console.log("分组成员2")
console.log("分组成员3")
console.groupEnd()

 代码效果如下:

创建默认折叠分组 

console.groupCollapsed('创建一个默认折叠分组')
console.log("分组成员1")
console.log("分组成员2")
console.log("分组成员3")
console.groupEnd()

 代码效果如下:

console.time用法

console.time(label) 该方法做为计时器使用,一般用来计算一段代码执行的时间,配合 

console.timeEnd(label) 使用,调用后代表计时结束,输出时长。

console.time('代码计时器');
for (i = 0; i < 100000; i++) {}
console.timeEnd('代码计时器');

代码效果如下:

 

console.trace用法

console.trace(label) 该方法用于显示当前执行的代码在堆栈中的调用路径。

  1. label(可选)输出时的标签。

const method1 = () => {console.trace('路径') 
}
const method2 = () => {method1();
}
method2();

 代码效果如下:

console.clear用法

输出了这么多,该清空了。

console.clear()

效果如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/42938.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI视频创作一条龙!达摩院“寻光”平台炸场WAIC,突破可控编辑难题

卡奥斯智能交互引擎是卡奥斯基于海尔近40年工业生产经验积累和卡奥斯7年工业互联网平台建设的最佳实践&#xff0c;基于大语言模型和RAG技术&#xff0c;集合海量工业领域生态资源方优质产品和知识服务&#xff0c;旨在通过智能搜索、连续交互&#xff0c;实时生成个性化的内容…

开源模型应用落地-FastAPI-助力模型交互-进阶篇(一)

一、前言 FastAPI 的高级用法可以为开发人员带来许多好处。它能帮助实现更复杂的路由逻辑和参数处理&#xff0c;使应用程序能够处理各种不同的请求场景&#xff0c;提高应用程序的灵活性和可扩展性。 在数据验证和转换方面&#xff0c;高级用法提供了更精细和准确的控制&#…

C语言下结构体、共用体、枚举类型的讲解

主要内容 结构体结构体数组结构体指针包含结构体的结构链表链表相关操作共用体枚举类型 结构体 结构体的类型的概念 结构体实现步骤 结构体变量的声明 struct struct 结构体名{ 数据类型 成员名1; 数据类型 成员名2; ..…

从数据到洞察:DataOps加速AI模型开发的秘密实践大公开!

作者 | 代立冬&#xff0c;白鲸开源科技联合创始人&CTO 引言 在AI驱动的商业世界中&#xff0c;DataOps作为连接数据与洞察的桥梁&#xff0c;正迅速成为企业数据战略的核心。 在WOT全球技术创新大会2024北京站&#xff0c;白鲸开源联合创始人&CTO 代立冬 在「大数据…

严重的OpenSSH漏洞威胁数百万Linux系统

Qualys威胁研究部门(TRU)发现了OpenSSH服务器 (sshd) 中的一个严重漏洞&#xff0c;可能影响全球超过 1400 万个Linux系统。该漏洞被指定为 CVE-2024-6387&#xff0c;允许在基于 glibc 的 Linux 系统上以 root 权限进行远程未经身份验证的代码执行 (RCE)。 此漏洞源于信号处理…

Python 处理Excel 文件, openpyxl 库的使用:

下载&#xff1a; pip install openpyxl 基本使用&#xff1a; 新建一个Excel 工作簿&#xff1a; 使用openpyxl 需要先导入一个Workbook 类&#xff0c; 使用它可以创建一个Workbook<工作簿>对象&#xff0c; 也就是创建一个Excel表文件&#xff0c; web.active 可用来…

5款好用公司监控软件分享|管理者必看

当今社会&#xff0c;企业数据安全和员工工作效率成为了管理者不可忽视的重要议题。 选择合适的公司监控软件&#xff0c;不仅有助于提升管理效率&#xff0c;还能有效保障企业信息安全。 下面小编将为您分享五款备受好评的公司监控软件&#xff0c;助力管理者更好地管理企业…

公司可以拿监控辞退员工吗?有什么法律依据?

李经理&#xff1a;小张&#xff0c;我听说最近人力资源部打算使用我们新安装的安企神软件来监控员工的工作行为&#xff0c;以提高工作效率和确保公司信息安全。不过&#xff0c;我有点担心这会不会触及法律红线&#xff0c;比如如果我们发现某位员工严重违反公司规定&#xf…

ElasticSearch学习篇14_《检索技术核心20讲》进阶篇之大倒排索引

背景 学习极客实践课程《检索技术核心20讲》https://time.geekbang.org/column/article/215243&#xff0c;文档形式记录笔记。 内容 主要是海量数据的大倒排索引的一些原理设计思想&#xff0c;ES底层就是基于这些设计思想以及原理&#xff0c;主要涉及读写分离、索引分层等…

什么是离散化?

离散化 题目 你会这个题 吗&#xff1f; 题目 假定有一个无限长的数轴&#xff0c;数轴上每个坐标上的数都是 0 0 0。 现在&#xff0c;我们首先进行 n n n 次操作&#xff0c;每次操作将某一位置 x x x 上的数加 c c c。 接下来&#xff0c;进行 m m m 次询问&#x…

第十二节 设置默认文本提示

原型中我们常会用到文本框默认提示一些文本&#xff0c;获取焦点后消失文本提示&#xff0c;那如何实现呢&#xff1f;请看下面这个简单案例。 一、添加文本框也可以是矩形或者其他元件 二、添加文本样式 三、设置提示文本 四、元件获取焦点时将以隐藏提示 五、看效果 默认提示…

ShardingSphereConnection@4691d] will not be managed by Spring

boot整合分库分表后启动执行&#xff0c;提示链接不被spring管理&#xff0c; 应该看自己需要&#xff0c; 解决&#xff1a;

vue3+ts 重复参数提取成方法多处调用以及字段无值时不传字段给后端

参数提取前的写法&#xff0c;此写法值为空的时候也会传空字段给后端 会把无值的空字段传给后端 修改后的写法&#xff0c;不会把没有值的字段传给后端 // 列表和导出需要传给后端的公共参数&#xff08;加 || undefined即可过滤空字段&#xff09; const getCurentParam () …

昇思25天学习打卡营第14天|Pix2Pix实现图像转换

Pix2Pix是基于条件生成对抗网络&#xff08;cGAN, Condition Generative Adversarial Networks &#xff09;实现的一种深度学习图像转换模型&#xff0c;该模型是由Phillip Isola等作者在2017年CVPR上提出的&#xff0c;可以实现语义/标签到真实图片、灰度图到彩色图、航空图到…

leetcode--二叉搜索子树的最大键值和

leetcode地址&#xff1a;二叉搜索子树的最大键值和 给你一棵以 root 为根的 二叉树 &#xff0c;请你返回 任意 二叉搜索子树的最大键值和。 二叉搜索树的定义如下&#xff1a; 任意节点的左子树中的键值都 小于 此节点的键值。 任意节点的右子树中的键值都 大于 此节点的键值…

IOC、DI<4> Unity

IOC&#xff08;&#xff09;&#xff1a;控制反转&#xff0c;把程序上层对下层的依赖&#xff0c;转移到第三方的容器来装配 是程序设计的目标&#xff0c;实现方式包含了依赖注入和依赖查找&#xff08;.net里面只有依赖注入&#xff09; DI&#xff1a;依赖注入&#xff0c…

基于jeecgboot-vue3的Flowable流程-集成仿钉钉流程(一)一些样式的调整使用

因为这个项目license问题无法开源&#xff0c;更多技术支持与服务请加入我的知识星球。 1、比如下面的发起人双击后出现的界面不正常&#xff0c; 看它的样式主要是这个里面的margin-left应该太小了&#xff0c; [data-v-45b533d5] .el-tabs__content { margin-top: 50px;mar…

7.1作业6

uart4.h #ifndef __UART4_H__ #define __UART4_H__ #include "stm32mp1xx_gpio.h" #include "stm32mp1xx_rcc.h" #include "stm32mp1xx_uart.h" //rcc/gpio/uart4初始化 void hal_uart4_init(); //发送一个字符 void hal_put_char(const char s…

香橙派编译linux内核支持ebpf和虚拟WIFI

前言 上一篇文章香橙派5plus上跑云手机方案一 redroid(带硬件加速)中说了怎么运行redroid&#xff0c;这篇补一下怎么修改参数编译内核。 补充 上篇文章有个内容需要补充一下&#xff1a;更新完内核需要用下面的命令防止内核被apt更新&#xff0c;不然后面使用apt update又回…

浅析C++引用

浅析C引用"&" ​ C中引入了一个新的语言特性——引用(&)&#xff0c;它表示某一对象的别名&#xff0c;对象与该对象的引用都是指向统一地址。那么我们就来看看关于引用的一些知识点吧&#x1f9d0; 特性 引用在定义时必须初始化一个变量可以有多个引用引…