一文带你深刻了解控制台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,如果有这方面学习的小伙伴我们可以一起进行学习和交流。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

执行 kubeadm join 报错ERROR FileAvailable--etc-kubernetes-kubelet.conf

执行 kubeadm join 报错ERROR FileAvailable–etc-kubernetes-kubelet.conf [rootk8snode2 ~]# kubeadm join apiserver.demo:6443 --token c4nezq.ecv2kg9ok6gsresw --discovery-token-ca-cert-hash sha256:be1a55bea6b5bb5c8810434d3905a9cd0bbc33181862f7ad601346e1ab0…

python批量转化pdf图片为jpg图片

1.把pdf图片批量转为jpg&#xff1b;需要注意的是&#xff0c;需要先安装poppler这个软件&#xff0c;具体安装教程放在下面代码中了 2.代码 #poppler安装教程参考&#xff1a;https://blog.csdn.net/wy01415/article/details/110257130 #windows上poppler下载链接&#xff1a…

数据结构进阶篇 之 【二叉树顺序存储(堆)】的整体实现讲解(赋完整实现代码)

做人要谦虚&#xff0c;多听听别人的意见&#xff0c;然后记录下来&#xff0c;看看谁对你有意见 一、二叉树的顺序&#xff08;堆&#xff09;结构及实现 1.二叉树的顺序结构 2.堆的概念及结构 3.堆的实现 3.1 向下调整算法 AdJustDown 3.2 向上调整算法 AdJustUP 3.3 …

细讲内存四区

目录 1.1数据类型本质分析 1.1.1数据类型概念 1.1.2数据类型的本质 1.1.3给类型起别名--typedef 1.1.4void类型 1.2变量的本质分析 1.2.1变量的概念 1.2.2变量的本质 1.3程序的内存四区模型 1.3.1栈区和堆区 1.3.2静态区 1.4函数的调用模型 1.5函数调用变main量传…

AcWing 1413. 矩形牛棚(每日一题)

原题链接&#xff1a;1413. 矩形牛棚 - AcWing题库 作为一个资本家&#xff0c;农夫约翰希望通过购买更多的奶牛来扩大他的牛奶业务。 因此&#xff0c;他需要找地方建立一个新的牛棚。 约翰购买了一大块土地&#xff0c;这个土地可以看作是一个 R 行&#xff08;编号 1∼R&…

在Arduino IDE中使用文件夹组织源文件和头文件

在Arduino IDE中使用文件夹组织源文件和头文件 如果你是一名Arduino爱好者&#xff0c;你可能会发现随着项目的复杂度增加&#xff0c;代码的管理变得越来越困难。在Arduino IDE中&#xff0c;你可以通过使用文件夹来更好地组织你的源文件和头文件&#xff0c;使得代码更加清晰…

Python 妙用运算符重载——玩出“点”花样来

目录 运算符重载 主角点类 魔法方法 __getitem__ __setitem__ __iter__ __next__ __len__ __neg__ __pos__ __abs__ __bool__ __call__ 重载运算符 比较运算符 相等 不等 ! 大于和小于 >、< 大于等于和小于等于 >、< 位运算符 位与 & 位…

win11 环境配置 之 Jmeter(JDK17版本)

一、安装 JDK 1. 安装 jdk 截至当前最新时间&#xff1a; 2024.3.27 jdk最新的版本 是 官网下载地址&#xff1a; https://www.oracle.com/java/technologies/downloads/ 建议下载 jdk17 另存为到该电脑的 D 盘下&#xff0c;新建jdk文件夹 开始安装到 jdk 文件夹下 2. 配…

基于reactor模式的简易web服务器

文章目录 基于reactor模式的tcp服务器什么是reactor模式&#xff1f;实现步骤 修改recv_cb逻辑变成web服务器web服务器性能测试&#xff08;wrk工具的使用&#xff09; 基于reactor模式的tcp服务器 本文基于上篇的简易tcp通信服务器基础 上进行封装&#xff0c;写出使用epoll的…

递归方法的理解

递归方法调用 &#xff1a;方法自己调用自己的现象就称为递归。 递归的分类 : 直接递归、间接递归。 直接递归&#xff1a;方法自身调用自己 public void methodA (){ methodA (); } 间接递归&#xff1a;可以理解为A()方法调用B()方法&#xff0c;B()方法调用C()方法&am…

fastllm在CPU上推理ChatGLM3-6b,即使使用CPU依然推理速度很快,就来看这篇文章

介绍: GitHub - ztxz16/fastllm: 纯c++的全平台llm加速库,支持python调用,chatglm-6B级模型单卡可达10000+token / s,支持glm, llama, moss基座,手机端流畅运行纯c++的全平台llm加速库,支持python调用,chatglm-6B级模型单卡可达10000+token / s,支持glm, llama, moss基…

【实验报告】--基础VLAN

【VLAN实验报告】 一、项目背景 &#xff08;为 Jan16 公司创建部门 VLAN&#xff09; Jan16 公司现有财务部、技术部和业务部&#xff0c;出于数据安全的考虑&#xff0c;各部门的计算机需进 行隔离&#xff0c;仅允许部门内部相互通信。公司拓扑如图 1 所示&#xff0c; …

安装uim-ui插件不成功,成功解决

安装&#xff1a;这种安装&#xff0c;umi4 不支持&#xff0c;只有umi3才支持。而我发现官网现在默认使用的umi4。 yarn add umijs/preset-ui -D 解决&#xff1a;更改umi版本重新安装umi3 npm i ant-design/pro-cli3.1.0 -g #使用umi3 (指定umi3版本) pro create user-ce…

什么是防火墙,部署防火墙有什么好处?

与我们的房屋没有围墙或界限墙一样&#xff0c;没有防护措施的计算机和网络将容易受到黑客的入侵&#xff0c;这将使我们的网络处于巨大的风险之中。因此&#xff0c;就像围墙保护我们的房屋一样&#xff0c;虚拟墙也可以保护和安全我们的设备&#xff0c;使入侵者无法轻易进入…

WEB APIS知识点案例总结

随机点名案例 业务分析: 点击开始按钮随机抽取数组中的一个数据,放到页面中点击结束按钮删除数组当前抽取的一个数据当抽取到最后一个数据的时候,两个按钮同时禁用(只剩最后一个数据不用抽了) 核心:利用定时器快速展示,停止定时器结束展示 <!DOCTYPE html> <html…

【送书福利第六期】:《AI绘画教程:Midjourney使用方法与技巧从入门到精通》

文章目录 一、《AI绘画教程&#xff1a;Midjourney使用方法与技巧从入门到精通》二、内容介绍三、作者介绍&#x1f324;️粉丝福利 一、《AI绘画教程&#xff1a;Midjourney使用方法与技巧从入门到精通》 一本书读懂Midjourney绘画&#xff0c;让创意更简单&#xff0c;让设计…

小米SU7 我劝你再等等

文 | AUTO芯球 作者 | 李逵 我必须承认我一时没忍住 犯错了 我不会被我老婆打吧 感觉有点慌呀 这不前两天 我刚提了台问界M9嘛 但是昨晚看小米汽车发布会 是真的被雷总感染到了 真的没忍住 我又冲了台小米SU7 Pro版 本来我是准备抢创始版的 结果1秒钟时间 点进去就…

Java基础语法(六)| 类和对象

前言 Hello&#xff0c;大家好&#xff01;很开心与你们在这里相遇&#xff0c;我是一个喜欢文字、喜欢有趣的灵魂、喜欢探索一切有趣事物的女孩&#xff0c;想与你们共同学习、探索关于IT的相关知识&#xff0c;希望我们可以一路陪伴~ 1. 面向对象概述 1.1 什么是面向对象 Ja…

【毕业论文】| 基于Unity3D引擎的冒险游戏的设计与实现

&#x1f4e2;博客主页&#xff1a;肩匣与橘 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &#x1f4e2;本文由肩匣与橘编写&#xff0c;首发于CSDN&#x1f649; &#x1f4e2;生活依旧是美好而又温柔的&#xff0c;你也…

字符串(KMP)

P3375 【模板】KMP - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) #include<iostream> #include<algorithm> #include<cstdio> #include<cstring> using namespace std; #define ll long long const int N1e6100; int n0,m; char s1[N]; char s2[N];…