一文带你深刻了解控制台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

相关文章

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

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

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

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

C++实现俄罗斯方块(Windows控制台版)

C++实现俄罗斯方块(Windows控制台版) 在油管上看到一个使用C++控制台编写的俄罗斯方块小游戏,源代码200多行,B站上也有相关的讲解视频,非常不错,值得学习。 B站讲解视频地址为:【百万好评】国外技术大神C++游戏编程实战教程,油管580W收藏,新手10小时入门,并快速达到游戏开发能力(中英字幕) B站 CSDN博主千帐灯无此声还为此写了一篇博客:C++实现俄罗斯方块(源码+详解),讲

PHP: 深入了解一致性哈希

前言 随着memcache、redis以及其它一些内存K/V数据库的流行,一致性哈希也越来越被开发者所了解。因为这些内存K/V数据库大多不提供分布式支持(本文以redis为例),所以如果要提供多台redis server来提供服务的话,就需要解决如何将数据分散到redis server,并且在增减redis server时如何最大化的不令数据重新分布,这将是本文讨论的范畴。 取模算法 取模运

Weex入门教程之1,了解Weex

【资料合集】Weex Conf回顾集锦:讲义PDF+活动视频! PDF分享:链接:http://pan.baidu.com/s/1hr8RniG 密码:fa3j 官方教程:https://weex-project.io/cn/v-0.10/guide/index.html 用意 主要是介绍Weex,并未涉及开发方面,好让我们开始开发之前充分地了解Weex到底是个什么。 以下描述主要摘取于

控制台和MFC中内存泄露工具vld的使用

最近想检测下项目中内存泄露的情况,选中了vld这款。在查找使用方法的时候,大都是控制台下的示例,添加到main函数所在的源文件上。换成MFC就纠结了,不知道添加到哪里去。本文记录控制台和MFC中的使用vld过程。    vld资源:    1)、大家可以移步下边的网址下载:     http://vld.codeplex.com/releases/view/82311    2

Java了解相对较多!

我是对Java了解相对较多,而对C#则是因工作需要才去看了一下,C#跟Java在语法上非常相似,而最初让我比较困惑的就是委托、事件部分,相信大多数初学者也有类似的困惑。经过跟Java的对比学习,发现这其实跟Java的监听、事件是等同的,只是表述上不同罢了。   委托+事件是观察者模式的一个典型例子,所谓的委托其实就是观察者,它会关心某种事件,一旦这种事件被触发,这个观察者就会行动。   下

使用WebP解决网站加载速度问题,这些细节你需要了解

说到网页的图片格式,大家最常想到的可能是JPEG、PNG,毕竟这些老牌格式陪伴我们这么多年。然而,近几年,有一个格式悄悄崭露头角,那就是WebP。很多人可能听说过,但到底它好在哪?你的网站或者项目是不是也应该用WebP呢?别着急,今天咱们就来好好聊聊WebP这个图片格式的前世今生,以及它值不值得你花时间去用。 为什么会有WebP? 你有没有遇到过这样的情况?网页加载特别慢,尤其是那

centos7 安装rocketmq4.7.0以及RocketMQ-Console-Ng控制台

一、前置工作 1.1安装jdk8 https://blog.csdn.net/pang_ping/article/details/80570011 1.2安装maven https://www.cnblogs.com/116970u/p/11211963.html 1.3安装git https://blog.csdn.net/xwj1992930/article/details/964

彻底解决win10系统Tomcat10控制台输出中文乱码

彻底解决Tomcat10控制台输出中文乱码 首先乱码问题的原因通俗的讲就是读的编码格式和写的解码格式不一致,比如最常见的两种中文编码UTF-8和GBK,UTF-8一个汉字占三个字节,GBK一个汉字占两个字节,所以当编码与解码格式不一致时,输出端当然无法识别这是啥,所以只能以乱码代替。 值得一提的是GBK不是国家标准编码,常用的国标有两,一个是GB2312,一个是GB18030 GB1