一文带你深刻了解控制台console那些事

2024-03-30 23:36

本文主要是介绍一文带你深刻了解控制台console那些事,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、前言

首先感谢小伙伴们访问我的博客,但是你是有多么的无聊才会选择打开我的控制台呢?不过还是很感谢大家通过邮件的形式,给我提出很多的宝贵意见

借此机会正好和大家唠一唠前端console到底有什么魔法。

Snipaste_2024-03-29_22-03-51.png

二、console.log调试必备

console.log我敢说这是我们前端打工仔程序调试过程中必备的一个方法。

说到这想起来之前同事问我这么一个问题:

2.1 问题描述

为什么console.log('123' + { name: 'iyongbao'})打印的是123[object Object]

我就不要脸的给不懂的(和我一样的小白)解释一下这个是怎么来的:

我们知道,JavaScript是弱类型语言,像+号这种:

  1. 如果+号两边是字符串类型:那就是直接拼接:‘1’ + ‘2’ = ‘12’
  2. 如果+号一边是字符串,一边是对象(object)也就上边这样,在进行+运算之前,对象会‘努力’的去转换为String类型,于是乎对象就会调用toString方法,结果就是’[object Object]',然后在和字符串进行拼接,就得到了123[object Object]

小结:其实前端console有很多有意思的方法,他们并不是只有花哨,本章节我就好好给大家普及一下console其他方法的妙用。

三、console方法知多少

不要只是使用console.log,我们更应该尝试一些新方法,有助于缓解我们的眼疲劳

3.1 console.warn 警告

尝试着去使用warn来调试我们的程序。

Snipaste_2024-03-30_22-22-30.png

是不是特别的醒目,这就让我们联想到Vue有时也会给我们提示类似的警告信息。

3.2 console.error 错误提示

这个也类似于console.warn,基本常出现在我们经常使用的一些前端框架中。

Snipaste_2024-03-30_22-28-12.png

3.3 console.table 表格输出

这个方法很有意思,你可能第一次听说。不过这个方法确实很很有,它会把我们的对象(数组)表格的形式进行直观展现。

const response = {name: 'iyongbao',age: 26,front: 'Vue',backstage: 'Java'
}console.table(response);

Snipaste_2024-03-30_22-37-34.png

3.4 console.time、console.timeEnd 时间间隔

我们可以通过这两个方法来计算程序的运行时间,比如我们来计算1000次循环所需要的时间,我们就可以像下面这样:

console.time('运行时间');for(let i = 0; i < 1000; i ++) {}console.timeEnd('运行时间');

Snipaste_2024-03-30_22-45-25.png

四、控制台花活

最近就是和大家说一下我的个人网站,控制台那些文字是怎么输出出来的。其他细心的小伙伴可能会看到,当我们访问度娘的时候,打开控制台也会有类似的操作。

Snipaste_2024-03-30_22-49-56.png

4.1 %c样式占位符

首先是%c这个符号我们会用到,它可以设置文本的样式,和我们写css一样。

console.log('%c 大家好', 'color: red;');

Snipaste_2024-03-30_22-54-08.png

剩下的就需要靠大家发挥自己的想象喽!

五、总结

最近工作有点忙,但是又特别想和大家一起分享点小技能,所以更新的很慢,每天下班回家基本都已经快十点了,也希望大家能够谅解,最近在研究Arcgis,如果有这方面学习的小伙伴我们可以一起进行学习和交流。

这篇关于一文带你深刻了解控制台console那些事的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/862877

相关文章

一文详解Java Condition的await和signal等待通知机制

《一文详解JavaCondition的await和signal等待通知机制》这篇文章主要为大家详细介绍了JavaCondition的await和signal等待通知机制的相关知识,文中的示例代码讲... 目录1. Condition的核心方法2. 使用场景与优势3. 使用流程与规范基本模板生产者-消费者示例

电脑密码怎么设置? 一文读懂电脑密码的详细指南

《电脑密码怎么设置?一文读懂电脑密码的详细指南》为了保护个人隐私和数据安全,设置电脑密码显得尤为重要,那么,如何在电脑上设置密码呢?详细请看下文介绍... 设置电脑密码是保护个人隐私、数据安全以及系统安全的重要措施,下面以Windows 11系统为例,跟大家分享一下设置电脑密码的具体办php法。Windo

IDEA如何让控制台自动换行

《IDEA如何让控制台自动换行》本文介绍了如何在IDEA中设置控制台自动换行,具体步骤为:File-Settings-Editor-General-Console,然后勾选Usesoftwrapsin... 目录IDEA如何让控制台自http://www.chinasem.cn动换行操作流http://www

IDEA运行spring项目时,控制台未出现的解决方案

《IDEA运行spring项目时,控制台未出现的解决方案》文章总结了在使用IDEA运行代码时,控制台未出现的问题和解决方案,问题可能是由于点击图标或重启IDEA后控制台仍未显示,解决方案提供了解决方法... 目录问题分析解决方案总结问题js使用IDEA,点击运行按钮,运行结束,但控制台未出现http://

一文详解Python中数据清洗与处理的常用方法

《一文详解Python中数据清洗与处理的常用方法》在数据处理与分析过程中,缺失值、重复值、异常值等问题是常见的挑战,本文总结了多种数据清洗与处理方法,文中的示例代码简洁易懂,有需要的小伙伴可以参考下... 目录缺失值处理重复值处理异常值处理数据类型转换文本清洗数据分组统计数据分箱数据标准化在数据处理与分析过

Python如何使用seleniumwire接管Chrome查看控制台中参数

《Python如何使用seleniumwire接管Chrome查看控制台中参数》文章介绍了如何使用Python的seleniumwire库来接管Chrome浏览器,并通过控制台查看接口参数,本文给大家... 1、cmd打开控制台,启动谷歌并制定端口号,找不到文件的加环境变量chrome.exe --rem

一文带你理解Python中import机制与importlib的妙用

《一文带你理解Python中import机制与importlib的妙用》在Python编程的世界里,import语句是开发者最常用的工具之一,它就像一把钥匙,打开了通往各种功能和库的大门,下面就跟随小... 目录一、python import机制概述1.1 import语句的基本用法1.2 模块缓存机制1.

一文带你搞懂Nginx中的配置文件

《一文带你搞懂Nginx中的配置文件》Nginx(发音为“engine-x”)是一款高性能的Web服务器、反向代理服务器和负载均衡器,广泛应用于全球各类网站和应用中,下面就跟随小编一起来了解下如何... 目录摘要一、Nginx 配置文件结构概述二、全局配置(Global Configuration)1. w

关于数据埋点,你需要了解这些基本知识

产品汪每天都在和数据打交道,你知道数据来自哪里吗? 移动app端内的用户行为数据大多来自埋点,了解一些埋点知识,能和数据分析师、技术侃大山,参与到前期的数据采集,更重要是让最终的埋点数据能为我所用,否则可怜巴巴等上几个月是常有的事。   埋点类型 根据埋点方式,可以区分为: 手动埋点半自动埋点全自动埋点 秉承“任何事物都有两面性”的道理:自动程度高的,能解决通用统计,便于统一化管理,但个性化定

速了解MySQL 数据库不同存储引擎

快速了解MySQL 数据库不同存储引擎 MySQL 提供了多种存储引擎,每种存储引擎都有其特定的特性和适用场景。了解这些存储引擎的特性,有助于在设计数据库时做出合理的选择。以下是 MySQL 中几种常用存储引擎的详细介绍。 1. InnoDB 特点: 事务支持:InnoDB 是一个支持 ACID(原子性、一致性、隔离性、持久性)事务的存储引擎。行级锁:使用行级锁来提高并发性,减少锁竞争