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

news2025/1/4 18:50:45

目录

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.coloradmin.cn/o/1907383.html

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

相关文章

ACL 2024|D2LLM:将Causal LLM改造成向量搜索模型的黑科技

语义搜索任务的主要挑战是创建既准确又高效的模型来精准定位与用户查询相关的句子。基于BERT风格的双编码器因为可以使用预先计算的嵌入表示时效率很高&#xff0c;但它们往往会错过句子对的微妙关系。相反&#xff0c;基于 GPT 风格的大语言模型&#xff08;LLM&#xff09;采…

【Python基础篇】条件判断和循环判断

文章目录 1. 条件判断1.1 单分支1.2 双分支1.3 多分支 2. 循环判断2.1 while2.2 for2.3 break2.4 continue 1. 条件判断 1.1 单分支 前面学习了打印&#xff0c;但是有时候我们在打印时会面临选择&#xff0c;例如&#xff1a;一个网吧&#xff0c;未满18&#xff0c;禁止进入…

将QT移植到IMX6ULL开发板

文章目录 前言一、编译系统1.设置交叉编译工具链2.编译系统3.烧写 二、Linux中下载QT1.安装 Qtcreator2.创建第一个程序3.配置 QtCreator 开发环境&#xff08;1&#xff09;打开选项界面&#xff08;2&#xff09;选择编译器&#xff08;3&#xff09;设置编译器&#xff08;4…

【Go】函数的使用

目录 函数返回多个值 init函数和import init函数 main函数 函数的参数 值传递 引用传递&#xff08;指针&#xff09; 函数返回多个值 用法如下&#xff1a; package mainimport ("fmt""strconv" )// 返回多个返回值&#xff0c;无参数名 func Mu…

数组算法(二):交替子数组计数

1. 官方描述 给你一个二进制数组nums 。如果一个子数组中 不存在 两个 相邻 元素的值 相同 的情况&#xff0c;我们称这样的子数组为 交替子数组 。 返回数组 nums 中交替子数组的数量。 示例 1&#xff1a; 输入&#xff1a; nums [0,1,1,1] 输出&#xff1a; 5 解释&#…

年销量超1亿箱,三得利BOSS咖啡如何凭借人群战略打造极致产品力?

BOSS咖啡诞生于1992年&#xff0c;在可口可乐、朝日、麒麟等饮料巨头先后入局&#xff0c;市场竞争非常激烈的情况下&#xff0c;BOSS咖啡成为受国民欢迎的品牌&#xff0c;它是如何做到的呢? 罐装咖啡趋势崛起&#xff0c;各大品牌推出罐装咖啡 自1980年代起&#xff0c;罐装…

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

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

PL/SQL安装+汉化教程

PL/SQL安装教程 一、安装&#xff1a; 登陆官网&#xff1a;PL/SQL Developer - Allround Automations下载 下载PL/SQL稳定版本12.0.7 根据自己计算机版本安装相适配的版本。我这里安装X64-bit版本 进行安装&#xff1a; 根据情况去更改安装&#xff0c;我这里全部下一步…

服务注册Eureka

目录 一、背景 1、概念 2、CAP 理论 3、常见的注册中心 二、Eureka 三、搭建 Eureka Server 1、搭建注册中心 四、服务注册 五、服务发现 六、Eureka 和 Zooper 的区别 一、背景 1、概念 远程调用就类似于一种通信 例如&#xff1a;当游客与景区之间进行通信&…

代码随想录-Day51

115. 不同的子序列 给你两个字符串 s 和 t &#xff0c;统计并返回在 s 的 子序列 中 t 出现的个数&#xff0c;结果需要对 109 7 取模。 示例 1&#xff1a; 输入&#xff1a;s “rabbbit”, t “rabbit” 输出&#xff1a;3 解释&#xff1a; 如下所示, 有 3 种可以从 …

【SMPL简介】SMPL: A Skinned Multi-Person Linear Model【源码复现】

【SMPL简介】SMPL: A Skinned Multi-Person Linear Model【源码复现】 一、前言环境搭建运行demo.py 参考链接 一、前言 SMPL是一种3D人体建模方法.在数字人或者人物角色三维重建领域有着广泛应用 支持人体的各种形状及动作 可以简单理解为通过训练获取的人物模型 常用的模型有…

信息技术课堂纪律管理:从混乱到秩序的智慧转型

引言&#xff1a; 在信息爆炸的时代&#xff0c;信息技术课程如同一把开启未来世界大门的钥匙&#xff0c;为学生们搭建起探索科技奥秘的桥梁。然而&#xff0c;面对着屏幕背后的无限诱惑&#xff0c;维持课堂纪律&#xff0c;确保学生们专注于学习&#xff0c;成为了每位信息…

Flask项目搭建及部署 —— Python

flask搭建及部署 pip 19.2.3 python 3.7.5 Flask 1.1.1 Flask-SQLAlchemy 2.4.1 Pika 1.1.0 Redis 3.3.11 flask-wtf 0.14.2 1、创建flask项目&#xff1a; 创建完成后整个项目结构树&#xff1a; app.py: 项⽬管理⽂件&#xff0c;通过它管理项⽬。 static: 存放静态…

使用tcpdump抓取本本机的所有icmp包

1、抓取本机所有icmp包 tcpdump -i any icmp -vv 图中上半部分&#xff0c;是源主机tmp179无法ping通目标主机192.168.10.79&#xff08;因为把该主机关机了&#xff09;的状态&#xff0c;注意看&#xff0c;其中有unreachable 图中下半部分&#xff0c;是源主机tmp179可以p…

张量分解(2)——张量运算(内积、外积、直积、范数)

&#x1f345; 写在前面 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;这里是hyk写算法了吗&#xff0c;一枚致力于学习算法和人工智能领域的小菜鸟。 &#x1f50e;个人主页&#xff1a;主页链接&#xff08;欢迎各位大佬光临指导&#xff09; ⭐️近…

国内仅存的3个完美替代Google安卓商店的APP与网站

Google安卓商店在国内访问限制&#xff0c;部分谷歌商店镜像站点也相继受限&#xff0c;现分享目前仍可在国内顺畅使用的应用程序商店与网站资源&#xff0c;请大家且用且珍惜。 2024年7月8日国内验证有效的资源 F-Droid 简介&#xff1a;F-Droid&#xff0c;专注于开源软件的…

独立站爆款产品的选品思路及底层逻辑拆解

在这个竞争激烈的跨境电商市场&#xff0c;有一件事情比网站设计、营销策略、物流服务都更重要。那就是选品。跨境独立站选品是独立站成功的第一步&#xff0c;如果选错了产品&#xff0c;那么所有努力都可能白费。可能会面临库存积压、利润低迷、客户流失等问题。但是如果选对…

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

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

NFT 技术在艺术领域的应用

NFT (Non-Fungible Token) 技术在艺术领域有着广泛的应用&#xff0c;为艺术家和艺术品收藏家带来了新的机遇和挑战。以下是 NFT 技术在艺术领域的一些主要应用。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1. 数字艺术品确权和交…

【Spring Boot】Spring AOP动态代理,以及静态代理

目录 Spring AOP代理一. 代理的概念二. 静态代理三. JDK代理3.1 重写 invoke 方法进⾏功能增强3.2 通过Proxy类随机生成代理对象 四. CGLIB代理4.1 自定义类来重写intercept方法4.2 通过Enhancer类的create方法来创建代理类 五. AOP源码剖析 总结(重中之重&#xff0c;精华) Sp…