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

目录

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.mfbz.cn/a/783879.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HCIA综合实验

学习新思想&#xff0c;争做新青年。今天学习的是HCIA综合实验&#xff01; 实验拓扑 实验需求 总部&#xff1a; 1、除了SW8 SW9是三层交换机&#xff0c;其他交换机均为2层交换机。 2、GW为总部的出口设备&#xff0c;使用单臂路由技术&#xff0c;VLAN10,20,100的网关都在GW…

写一个函数,返回参数二进制中 1 的个数

代码要求 输入一个整数n&#xff0c;输出该数32位二进制中为1的个数&#xff08;包括最高位的符号位&#xff09;&#xff0c;其中负数用补码表示 如&#xff1a;输入&#xff1a;15 &#xff08;15的二进制表示&#xff1a;0000 1111&#xff09; 输出&#xff1a;4 代码实…

生成式人工智能:开发者的得力助手还是职业威胁?

在过去的几年里&#xff0c;生成式人工智能&#xff08;AIGC&#xff09;在软件开发领域引发了广泛关注。AI工具在代码生成、错误检测、自动化测试等方面的应用&#xff0c;正在迅速改变开发者的工作方式。AI究竟是在帮助开发者提高效率&#xff0c;还是在逐渐取代他们&#xf…

开个技术外挂|用技术轻松实现GPU显卡冷却风扇噪声控制

GPU显卡冷却风扇噪声分析 游戏玩家可能有这样的体验&#xff1a;当显卡卖力工作的时候&#xff0c;明显感觉到从机箱传来的噪声变大了。这是因为系统监测到芯片有过热风险&#xff0c;从而自动提升了冷却风扇的转速。 如下图所示&#xff0c;当GPU显卡处于 20C 时&#xff0c;风…

文心一言 VS 讯飞星火 VS chatgpt (298)-- 算法导论22.1 2题

二、给定一棵有 7 个结点的完全二叉树的邻接链表&#xff0c;请给出等价的邻接矩阵表示。这里假设结点的编号为从 1~7 。如果要写代码&#xff0c;请用go语言。 文心一言&#xff1a; 在Go语言中&#xff0c;表示一棵完全二叉树的邻接矩阵首先需要理解完全二叉树的性质&#…

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

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

数据结构——二叉树之c语言实现堆与堆排序

目录 前言&#xff1a; 1.二叉树的概念及结构 1.1 特殊的二叉树 1.2 二叉树的存储结构 1.顺序存储 2.链式存储 2. 二叉树的顺序结构及实现 2.1 堆的概念 ​编辑 2.2 堆的创建 3.堆的实现 3.1 堆的初始化和销毁 初始化&#xff1a; 销毁&#xff1a; 插入&…

C-10 凸包

凸包 数学定义 平面的一个子集S被称为是凸的&#xff0c;当且仅当对于任意两点A&#xff0c;B属于S&#xff0c;线段PS都完全属于S过于基础就不详细介绍了 凸包的计算 github上找到了别人的代码&#xff0c;用4种方式实现了凸包的计算&#xff0c;把他放在这里链接地址htt…

LibreOffice的国内镜像安装地址和node.js国内快速下载网站

文章目录 1、LibreOffice1.1、LibreOffice在application-conf.yml中的配置2、node.js 1、LibreOffice 国内镜像包网址&#xff1a;https://mirrors.cloud.tencent.com/libreoffice/libreoffice/ 1.1、LibreOffice在application-conf.yml中的配置 jodconverter:local:enable…

平安消保在行动 | 守护每一个舒心笑容 不负每一场双向奔赴

“要时刻记得以消费者为中心&#xff0c;把他们当做自己的朋友&#xff0c;站在他们的角度去思考才能更好地解决问题。” 谈及如何成为一名合格的消费者权益维护工作人员&#xff0c;平安养老险深圳分公司负责咨诉工作的庞宏霄认为&#xff0c;除了要具备扎实的专业技能和沟通…

安全及应用(更新)

一、账号安全 1.1系统帐号清理 #查看/sbin/nologin结尾的文件并统计 [rootrootlocalhost ~]# grep /sbin/nologin$ /etc/passwd |wc -l 40#查看apache登录的shell [rootrootlocalhost ~]# grep apache /etc/passwd apache:x:48:48:Apache:/usr/share/httpd:/sbin/nologin#改变…

const 修饰不同内容区分

1.修饰局部变量 const int a 1;int const a 1; 这两种是一样的 注意&#xff1a; const int b; 该情况下编译器会报错&#xff1a;常量变量"b”需要初始值设定项 将一个变量没有赋初始值直接const修饰后&#xff0c;在以后时无法更改内容的。 2.修饰常量字符串 a.…

算法题:用JS实现删除链表的倒数第N个节点

学习目标&#xff1a; 删除链表的倒数第N个节点 leetcode原题链接 学习内容&#xff1a; 给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点 示例 1: 输入&#xff1a;head [1,2,3,4,5], n 2 输出&#xff1a;[1,2,3,5] 示例 2: 输入&a…

基于YOLOv9的线路绝缘子缺陷检测【python源码+UI界面+数据集+模型+语音报警+安装说明】

往期精品导航 基于YOLOv9的脑肿瘤区域检测智慧课堂基于YOLOv8的学生上课行为检测基于YOLOv9pyside的安检仪x光危险物物品检测&#xff08;有ui&#xff09;基于YOLOv9的PCB板缺陷检测 前言 高压输电线绝缘子是电力输送系统中关键的组成部分&#xff0c;负责防止电流泄露&…

Trinity:转录组从头组装

安装 #下载安装包 wget -c https://github.com/trinityrnaseq/trinityrnaseq/releases/download/Trinity-v2.15.1/trinityrnaseq-v2.15.1.FULL.tar.gztar -xzvf trinityrnaseq-v2.15.1.FULL.tar.gz cd trinityrnaseq-v2.15.1 make make plugins #安装依赖 mamba install -c bio…

收银系统源码-次卡功能

智慧新零售收银系统是一套线下线上一体化收银系统&#xff0c;给门店提供了含线下收银称重、线上商城、精细化会员管理、ERP进销存、营销活动、移动店务助手等一体化行业解决方案&#xff01; 详细功能见下文&#xff1a; 门店收银系统源码-CSDN博客文章浏览阅读2.6k次&#…

SDK环境的安装(测试使用)

1、安装 将文件解压至目录,我的目录为:D:\Program Files\Android 解压后如下: 下载链接如下: sdk下载 提取码见文章最后: 2、配置环境 1、在环境变量中,选择系统变量,点击新建。 变量名:ANDROID_HOME 变量值:“你自己的android-sdk安装路径” (例如我的:D:\Pro…

大语言模型的应用探索AI Agent初探!

前言 大语言模型的应用之一是与大语言模型进行聊天也就是一个ChatBot&#xff0c;这个应用已经很广泛了。 接下来的一个应用就是AI Agent。 AI Agent是人工智能代理&#xff08;Artificial Intelligence Agent&#xff09;的概念&#xff0c;它是一种能够感知环境、进行决策…

算法训练营day26--455.分发饼干+376. 摆动序列+53. 最大子序和

一、455.分发饼干 题目链接&#xff1a;https://leetcode.cn/problems/assign-cookies/ 文章讲解&#xff1a;https://www.programmercarl.com/0455.%E5%88%86%E5%8F%91%E9%A5%BC%E5%B9%B2.html 视频讲解&#xff1a;https://www.bilibili.com/video/BV1MM411b7cq 1.1 初见思…

如何优化 PostgreSQL 中对于自关联表的查询?

文章目录 一、理解自关联表查询二、分析性能问题的可能原因&#xff08;一&#xff09;缺少合适的索引&#xff08;二&#xff09;大量数据的笛卡尔积&#xff08;三&#xff09;复杂的查询逻辑 三、优化策略及解决方案&#xff08;一&#xff09;创建合适的索引&#xff08;二…