[JS] 前端充分使用console.log()有效输出(2024-6-1)

将变量包装在对象中

不要使用 console.log(url, url2, baz),而是使用 console.log({ url, url2, baz })。

如果你比较这两者,你会发现这有多么有用:拥有 url 和 url2 键可以避免这两个 URL 之间的混淆。

在日志前加上唯一字符串前缀

在应用程序的多个地方记录日志时,想出一个唯一的前缀并在所有日志中使用它是很有用的。这样可以更容易地在控制台中搜索和过滤日志。


搜索 debug-issue:准确定位日志查询信息,如果有其他无关的日志在其中,这将节省你很多时间。

对于对象使用 console.table()

当打印多个结构相似的对象时,console.table()是 console.log()的一个更强大的可视化替代方案。

表格格式立即清楚地显示出我们在一个行中将 name。

对于函数和 DOM 元素使用 console.dir()

console.dir()在帮助你调查复杂的原型时非常有用,因为它们的 toString() 输出并不能揭示所有信息。

让我们看看输出:

你可以看到 console.log 提供了函数的字符串化版本,而console.dir 则提供了许多其他属性。真正酷的是,如果你点击[[FunctionLocation]]链接,它会显示该函数的源代码:


同样,你会看到 DOM 元素的输出在console.dir中更加详细,因为你可以看到 DOM 元素的每一个属性:

为你的 console.logs 添加样式

你可以为你的 console.log 语句添加样式。

console.log(// What comes after %c is what the styles will apply to"This is %cMy stylish message",// you can add multiple properties:"color: yellow; font-style: italic; background-color: blue;padding: 2px"
);

// You could also style different parts of the console with multipule %c's:
console.log("Multiple styles: %cred %corange",// style for first %c"color: red",// style for second %c"color: orange",// for every %c you can add more styles with ",""Additional unformatted message"
);

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

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

相关文章

PCL 指数函数回归(二维)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 指数回归与之前所提到的线性回归类似,我们只需要变换一下指数的形式,如下所示: y = a ∗ e b x y = a * e^{bx}

开箱即用的Spring Boot 企业级开发平台【毕设项目推荐】

项目概述 基于 Spring 实现的通用权限管理平台(RBAC模式)。整合最新技术高效快速开发,前后端分离模式,开箱即用。 核心模块包括:用户、角色、职位、组织机构、菜单、字典、日志、多应用管理、文件管理、定时任务等功能…

牛客网刷题 | BC107 箭形图案

目前主要分为三个专栏,后续还会添加: 专栏如下: C语言刷题解析 C语言系列文章 我的成长经历 感谢阅读! 初来乍到,如有错误请指出,感谢! 描述 KiKi学习了循环&am…

【计算机毕业设计】359微信小程序校园失物招领系统

🙊作者简介:拥有多年开发工作经验,分享技术代码帮助学生学习,独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。🌹赠送计算机毕业设计600个选题excel文件,帮助大学选题。赠送开题报告模板&#xff…

Qt | QFile 类(文件)

01、QFile简介 一、QFile 基本原理 1、QFile 基础 ①、QFile 类继承自 QFileDevice 类,QFileDevice 又继承自 QIODevice类。 ②、QFile 类提供了一个用于读取/写入文件的接口,是一种读写二进制文件、文本、资源的 I/O 设备。 ③、默认情况下 QFile 假定为二进制,即不对存…

WebClient 快速入门 (使用 WebClient 发起 HTTP 请求)

1.简介 执行异步 HTTP 请求:WebClient 允许你发送 GET、POST、PUT、DELETE 等各种 HTTP 请求,并且这些请求都是异步的,不会阻塞调用线程。 处理响应:你可以使用 WebClient 来处理 HTTP 响应,包括获取响应体、响应头和…

Ubuntu系统中的输入法

在Ubuntu中安装了搜狗拼音输入法后,想要使用它,可以按照以下步骤进行操作: 1. 安装Fcitx输入法框架(如果尚未安装) 打开终端(Terminal)。执行以下命令以更新软件源(确保软件列表是…

Android学习之ION memory manager

目录 what is ION? ION原理 ION数据结构 用户空间 API ION API what is ION? ION是Google的内存管理器,用来支持不同的内存分配机制,如CARVOUT(PMEM),物理连续内存(kmalloc), 虚拟地址连续但物理不连续内存(vmalloc), IOM…

智慧校园的应用场景有哪些

在21世纪的教育挑战中,如何利用科技手段优化教育资源分配,提升教学质量?智慧校园给出了答案。基于信息化的教育改革,智慧校园不仅提升了校园管理的效率,更通过一系列智能化应用,重塑了教学、学习和交流的方…

搭建大型分布式服务(三十八)SpringBoot 整合多个kafka数据源-支持protobuf

系列文章目录 文章目录 系列文章目录前言一、本文要点二、开发环境三、原项目四、修改项目五、测试一下五、小结 前言 本插件稳定运行上百个kafka项目&#xff0c;每天处理上亿级的数据的精简小插件&#xff0c;快速上手。 <dependency><groupId>io.github.vipjo…

多个短视频剪辑成一个视频:四川京之华锦信息技术公司

多个短视频剪辑成一个视频&#xff1a;创作中的艺术与技术 在数字时代&#xff0c;短视频以其短小精悍、内容丰富的特点&#xff0c;迅速成为社交媒体上的热门内容形式。然而&#xff0c;有时单一的短视频难以完全表达创作者的意图或满足观众的观赏需求。因此&#xff0c;将多…

【Qt秘籍】[007]-LineEdit Pushbutton控件

Qt的中有着各种各样的控件&#xff0c;相较于传统C/C的输出默认只能在控制台实现&#xff0c;Qt中可以有不同的接口实现各种不同的功能&#xff0c;下面我们将实现不同功能的输出 hello world&#xff01; 标签Label 【Qt秘籍】[006]-Label实现Hello World程序-编程第一步-CSD…

递归和队列的异同

在JavaScript中&#xff0c;递归和队列都是处理重复任务和数据结构的常用方法。它们各有优劣&#xff0c;适用于不同的场景。以下是递归和队列的区别及其使用场景&#xff1a; 一 、递归 定义&#xff1a;递归是一种函数调用自身的方法&#xff0c;通常用于分解问题为更小的子…

C语言王国——内存函数

目录 1 memcpy函数 1.1 函数表达式 1.2 函数模拟 2 memmove函数 2.1 函数的表达式 2.2 函数模拟 3 memset函数 3.1 函数的表达式 3.2 函数的运用 4 memcmp函数 4.1函数的表达式&#xff1a; 4.2 函数的运用 5 结论 接上回我们讲了C语言的字符和字符串函数&#…

C语言编程求阶乘的程序:深度探索与算法优化

C语言编程求阶乘的程序&#xff1a;深度探索与算法优化 阶乘&#xff0c;这个看似简单的数学概念&#xff0c;在编程领域却蕴含着丰富的内涵。在C语言中&#xff0c;实现阶乘的计算既是对基础语法的运用&#xff0c;也是对算法设计的挑战。本文将从四个方面、五个方面、六个方…

MAC帧

基本问题 数据链路层的协议有很多&#xff0c;但是都有三个基本问题&#xff1a;封装成帧&#xff0c;透明传输和差错检测。 封装成帧 封装成帧&#xff08;Framing&#xff09;就是在一段数据的前后分别添加首部和尾部&#xff0c;这样就构成了一个帧。帧是数据链路层的传送…

vue中使用WebSocket心跳机制与Linux中的心跳机制

WebSocket心跳机制 一、WebSocket简介 WebSocket是HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术&#xff0c;属于应用层协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单&#xff0c;允许服务端主动向客户端推送数据。 二、WebSocket事件与方法 …

曝光超1.5亿,迪丽热巴“抖音直播首秀”解锁德施曼智能锁科技革命

作为中国电商行业年中最大的消费狂欢节点&#xff0c;今年的618大促热闹依旧&#xff1b;各大品牌在今年极简的现货模式下展开了周期最长的品牌实力比拼。其中&#xff0c;高端智能锁领军品牌德施曼在618大促期间&#xff0c;携手代言人迪丽热巴&#xff0c;再次掀起智能锁消费…

Python - 深度学习系列36 重塑实体识别3

说明 从应用的角度&#xff0c;对实体识别的全流程进行进一步的明确。从全流程的角度上看&#xff0c;需要对数据做一些规范&#xff0c;并允许在不同的阶段插进来进行修改和迭代。 内容 1 原始数据 假设这个阶段&#xff0c;通过较为简单的方式对数据做了标记 在初始阶段&a…

设计模式(七)结构型模式---组合模式

文章目录 组合模式简介结构UML图具体实现UML图代码实现 组合模式简介 组合模式&#xff08;Composite Pattern&#xff09;又叫整体模式&#xff0c;它创建了对象组的树形结构&#xff0c;将对象组合成树状结构来表示“整体-部分”的层次关系。实际使用点&#xff1a;HashMap中…