除了console.log,你还用过console其它的属性么?

news2024/12/25 2:08:26

目录

    • 前言
    • console.info
    • console.debug
    • console.error
    • console.warn
    • console.time 和 console.timeEnd
    • console.group 和 console.groupEnd
    • console.table

前言

刚学习前端的时候,vue还没用vue-devtools,react还没用 React Developer Tools,我们经常通过console.log和debug来检查代码的运行情况。

但好像除了console.log 以外,我们鲜少用上console的其它属性,但console的其它属性也很有趣。

console.info

在某些浏览器上,会在前面多一个!号,但google浏览器和console.log基本一致。
在这里插入图片描述

console.debug

可以认为和console.log一致,因为越来越多的浏览器已经放弃了
在这里插入图片描述

console.error

用来提示报错,许多函数都会有异常处理,比如try catch 和promise的catch,这个时候就可以直接console.error将异常展示出来。

try {
    console.log(bb)
    
} catch (error) {
    console.error(error)
}
console.log(123)

在这里插入图片描述

console.warn

当你检测到一些异常的时候,可以使用console.warn作出提示

console.warn('警告')

在这里插入图片描述

console.time 和 console.timeEnd

console.time 和 console.timeEnd之间运行的代码,会输出一个这段代码的运行时间,单位是毫秒

console.time() // 开始计时
setTimeout(function(){
    console.log('a')
    console.timeEnd() // 计时结束
},500)

在这里插入图片描述
你也许会好奇为啥是523ms而不是500ms,因为setTimeout本身就不是精确计时的,而且内部还有其它函数需要执行,也会消耗一些时间。

我们可以用这一对属性,来大致判断一下代码的运行性能,比如你优化之前和优化后,分别进行比较,查看时间差是否发生改变。

console.group 和 console.groupEnd

console.group和console.groupEnd之间运行的console,会被分配到同一个组里。

console.group('group1')
console.error('出错了')
console.log('name','dx')
console.log('age','18')
console.warn('警告')
console.groupEnd()
console.log('进不去了,group1已经关闭了')

在这里插入图片描述

console.table

function Person(firstName, lastName, age) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age
}

var john = new Person("John", "Smith", 18);
var jane = new Person("Jane", "Doe", 19);
var emily = new Person("Emily", "Jones", 20);
// 第一参数是行数,第二个参数是列数
console.table([john, jane, emily], ["firstName", "age"]);

在这里插入图片描述

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

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

相关文章

fastjson 1.2.47 RCE漏洞保姆级复现

1.漏洞概述 Fastjson提供了autotype功能,允许用户在反序列化数据中通过“type”指定反序列化的类型,Fastjson自定义的反序列化机制时会调用指定类中的setter方法及部分getter方法,那么当组件开启了autotype功能并且反序列化不可信数据时&…

Sklearn中的算法效果评估手段

我们曾在《算法效果评估:均方根误差(RMSE)/ 标准误差》一文中介绍过评估算法效果使用的主要方法:均方根误差(RMSE),但在实际应用中,评估算法效果还有更多内容,本文我们以…

VsCode安装及修改插件存储位置

【官网】: https://code.visualstudio.com/ 【修改插件仓库】: 创建名为VSCODE_EXTENSIONS的环境变量,内容指向自定义的文件夹即可(位置无需限制)。 【需要安装的插件】:

SBOM的介绍与syft和grype的使用

文章目录SBOM介绍工具syftgrypeSBOM介绍 SBOM(软件物料清单)是给定产品的中所有软件组件(专有和开源代码)、开源许可证和依赖项的清单。它提供了对软件供应链以及可能存在的任何许可证合规性、安全性和质量风险的可见性。 SBOM可…

Hystrix如何达到高可用

小型电商网站的页面展示采用页面全量静态化的思想。数据库中存放了所有的商品信息,页面静态化系统,将数据填充进静态模板中,形成静态化页面,推入Nginx服务器。用户浏览网站页面时,取用一个已经静态化好的html页面,直接返回回去,不涉及任何的业务逻辑处理。 用户每次浏览…

python输出不重复的字符

项目场景: 输入一个字符串,把最左边的10个不重复的字符(大小写算不同字符)挑选出来。 如不重复的字符不到10个,则按实际数目输出。问题描述 输出一个字符串,包含字符串s最左边10个不重复的字符。不到10个…

Canal与Kafka数据传输协议protocol buffer

1.写在前面 实时数仓开发中,利用Canal伪装slave获取MySQL的增量数据,获取后的数据由Kafka生产者接收,交由Flink实时流计算。传输数据量较大时,会占用内存及带宽,所以考虑将数据序列化和反序列化操作,这里介…

KNN(K-近邻)算法

1、概述 KNN(K−NearestNeighbor)KNN \left( K-Nearest Neighbor \right)KNN(K−NearestNeighbor)是机器学习中最基础的算法之一。既可以用于分类也可以用于回归,KNNKNNKNN通过测量不同特征值之间的距离来进行分类。 2、实例理解 如果k3k 3k3,绿色圆点…

【Cocos新手入门】使用 cocos creator 创建单行文本输入框及多行文本输入框

本篇文章主要讲解使用 cocos creator 创建单行文本输入框及多行文本输入框,并绑定文本框获取文本输入数据的方法。 作者:任聪聪 日期:2023年2月2日 cocos引擎版本2.4.3 实际效果 单行文本效果、多行文本效果 说明:如果不清楚按钮…

jquery:表单请求、序列化+案例

表单请求提交原则name相同的表单提交,name出现多次,对应不同表单的值没有name,含有disabled(禁用)禁止提交多选单选下拉列表需要设置value属性才能取值表单提交事件名称写法描述提交方式method“get”get不安全取数据&…

30. 面向对象高级编程

1. __solts__ 正常情况下,当我们定义了一个class,创建了一个class的实例后,我们可以给该实例绑定任何属性和方法,这就是动态语言的灵活性。 from types import MethodTypeclass Student:def __init__(self):passdef set_num(sel…

OSCP_VULHUB_Matrix3

文章目录简介扫描ida汇编ssh登录/提权简介 下载地址: https://download.vulnhub.com/matrix/Machine_Matrix_v3.ova 环境: VMware 16虚拟机软件 Matrix3靶机IP地址:192.168.132.145 Kali的IP地址:192.168.132.139 Matrix3靶机与…

Shiro基础知识与集成应用

1、Shiro可以完成: 【认证、授权、加密、会话管理】、与Web集成、缓存等2、特点: 易于使用、全面、灵活、强力支持Web、兼容性强、社区支持 外部观看内部观看3、 登录认证:1)身份验证:一般需要提供如身份ID等一些标识信息来表明登录者的身份,如提供email…

Druid(德鲁伊)数据库连接池

文章目录一.数据库连接池的必要性(一).传统数据库连接模式的的步骤(二).传统数据库连接模式存在的问题二.数据库连接池技术(一).数据连接池的思想:(二).数据库连接池的任务:(三).数据库连接池的规模:(四).工作原理:(五).数据库连接…

5 -【Faster R-CNN】之 AnchorGenerator 代码精读

【Faster R-CNN】之 AnchorGenerator 代码精读1、anchor 的 size 和 aspect_ratios2、计算以中心坐标为 (0, 0) 的 anchor3、将 anchor 映射到原图上4、代码汇总anchor 的作用:anchor 是用来做辅助计算的,用于和 (上节课说的,由RP…

共享模型之内存(一)

1.Java内存模型 1>.JMM即Java Memory Model,它定义了主存、工作内存抽象概念,底层对应着CPU寄存器、缓存、硬件内存、CPU指令优化等; 2>.JMM体现在以下几个方面: ①.原子性 - 保证指令不会受到线程上下文切换的影响; ②.可见性 - 保证指令不会受cpu缓存的影响; ③.有序…

大型会场活动线上保障方案

背景 为保证活动上线后的质量,大型会场活动上线前通常会预设一些线上可能出现的问题,提前制定保障方案。 这些与活动保障相关的问题可能与App端上的容器环境有关,也可能与大盘用户设备特征有关,问题的处理方案会影响活动的线上效…

《啊哈算法图的遍历》(14张图解)

目录 前言 一,dfs和bfs是什么 二,城市地图--图的深度优先遍历 三,最少转机--图的广度优先遍历 前言 🌼说爱你(超甜女声版) - 逗仔 - 单曲 - 网易云音乐 1月22日一个女孩加了我,她和我聊音…

adb常用指令合集

adb文件管理指令 1.复制设备里的文件到电脑 adb pull <设备里的文件路径> [电脑上的目录] 电脑上的目录 参数可以省略&#xff0c;默认复制到当前目录 例&#xff1a;adb pull /data/tsplogtool /home/jxq/文档/场景魔方 2.复制电脑里的文件到设备 adb push <电脑上的…

浅谈未来10年IT行业的变局与抉择,一文带你认识元宇宙

一. 困局据国家就业部门最新统计数据报告&#xff0c;2022年应届毕业生的数量首次突破1000万大关。其中研究生达到130万&#xff0c;985、211等名校毕业生75万&#xff0c;普通本科毕业生470万&#xff0c;专科生460万&#xff0c;另外还有几十万的归国留学生&#xff01;但这还…