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

目录

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;高级用法提供了更精细和准确的控制&#…

Leetcode 3209. Number of Subarrays With AND Value of K

Leetcode 3209. Number of Subarrays With AND Value of K 1. 解题思路2. 代码实现 题目链接&#xff1a;3209. Number of Subarrays With AND Value of K 1. 解题思路 这一题的话整体上是一个滑动窗口的思路&#xff0c;我们维护一个滑动窗口&#xff0c;确保其每一个窗口都…

『大模型笔记』你需要的不是智能体,而是一个适合 AI 的工作流

你需要的不是智能体,而是一个适合 AI 的工作流 文章目录 一. 你需要的不是智能体,而是一个适合 AI 的工作流1. 不要将 AI 的解决方案局限在人类现有的解决方案上2. 不必完全依赖 AI 做决策,而是让 AI 辅助做决策或者做简单的决策3. 结合不同领域的 AI 模型或者工具,设计合适…

RedHat运维-Linux文本操作基础-SED基础

1. 打印出/etc/passwd的第12行的命令为_______________________________________&#xff1b; 2. 打印出/etc/passwd的第12到第18行的命令为________________________________________&#xff1b; 3. 打印出/etc/passwd的总行数的命令为_____________________________________…

低代码研发项目管理流程优化:提效与创新的双重驱动

随着信息技术的迅猛发展&#xff0c;软件项目的规模和复杂度日益增加&#xff0c;传统的软件开发方式已经难以满足快速迭代和高效交付的需求。在这一背景下&#xff0c;低代码平台应运而生&#xff0c;以其高效、灵活、易用的特点&#xff0c;迅速成为软件行业的新宠。然而&…

运行pip出现UnicodeDecodeError: ‘ascii‘ codec can‘t decode

错误: UnicodeDecodeError: ascii codec cant decode byte 0xe2 in position 1025: ordinal not in range(128) ERROR: Exception: Traceback (most recent call last):File "/usr/local/lib/python3.6/dist-packages/pip/_internal/cli/base_command.py", line 22…

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

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

PostgreSQL的pg_bulkload工具

PostgreSQL的pg_bulkload工具 pg_bulkload 是一个针对 PostgreSQL 提供高性能批量数据加载的工具。相较于内置的 COPY 命令&#xff0c;pg_bulkload 更加灵活并且在许多情况下性能更高。它支持数据的强制加载、数据过滤、数据转换以及错误处理等多种功能&#xff0c;非常适合需…

qt hasPendingDatagrams() 函数

hasPendingDatagrams 是 Qt 框架中 QUdpSocket 类的一个方法&#xff0c;用于检查是否有待处理的数据报到达。在 UDP 通信中&#xff0c;数据以数据报的形式发送&#xff0c;而 QUdpSocket 类提供了用于接收和处理这些数据报的功能。 功能描述 hasPendingDatagrams() 方法用于…

从数据到洞察: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)。 此漏洞源于信号处理…

自己写个简单的vite插件

需求&#xff1a;根据使用环境显示对应的标题和icon 先在根目录建个plugins/vite-plugin-title-html.ts 文件内容如下: /*** 替换html里面的标题和icon*/ type HtmlTemplate {title?: string,icon?: string } export default function vitePluginHtmlTitle({ title, icon…

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

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

智能体重秤pcba方案

智能体重秤应用系统由硬件和软件两部分组成。硬件是指微控制器、扩展存储器、扩展输入输出设备等。软件是各种工作过程的通用名称。硬件和软件只有紧密协调&#xff0c;才能提高系统的性价比。从硬件设计开始&#xff0c;应考虑相应软件的设计方法&#xff0c;软件的设计是基于…

代码随想录算法训练营:26/60

非科班学习算法day26 | LeetCode491:非递减子序列 &#xff0c;Leetcode46:全排列 &#xff0c;Leetcode47:全排列|| 介绍 包含LC的两道题目&#xff0c;还有相应概念的补充。 相关图解和更多版本&#xff1a; 代码随想录 (programmercarl.com)https://programmercarl.com/…

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

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

C# Winform权限、用户和菜单开发的顺序和注意点

在C# Winform应用程序中&#xff0c;开发权限、用户和菜单功能通常遵循一定的顺序和注意点&#xff0c;以确保功能的连贯性和安全性。下面是一个推荐的开发流程及其注意事项&#xff1a; 开发流程 1. 数据库设计 用户表&#xff1a;存储用户基本信息&#xff0c;如用户名、密…

vue使用HMAC-SHA256签名算法

在 Vue.js 应用中生成签名算法通常涉及以下几个步骤&#xff1a; 收集数据&#xff1a;获取需要签名的数据。整理数据&#xff1a;根据协议或需求对数据进行排序、拼接、编码等处理。计算签名&#xff1a;使用密钥和算法&#xff08;如 HMAC-SHA256&#xff09;计算签名。附加…

微服务通信方式详解

引言 随着互联网应用的不断发展和用户需求的多样化&#xff0c;传统的单体架构已经无法满足现代应用的灵活性和扩展性需求。微服务架构因其模块化、松耦合、易于扩展和部署等优势&#xff0c;逐渐成为现代软件开发的重要趋势。在微服务架构中&#xff0c;各个服务相互独立、自…