前端console用法分享

console对于前端人员来讲肯定都不陌生,相信大部分开发者都会使用console来进行调试,但它能做的绝不仅限于调试。

最常见的控制台方法

作为开发者,最常用的 console 方法如下:

在这里插入图片描述

控制台打印结果:

在这里插入图片描述

今天我分享的是一些 console 的高级用法。

首先,看一下 console 提供了哪些方法,在控制台打印一下:

在这里插入图片描述

在 Chrome 123 版本,可以看到有 25 个方法。这篇文章将介绍一部分比较实用的方法,了解专业的前端都怎么运用 console的。

打印时间

  • console.time()– 使用输入参数的名称启动计时器。在给定页面上最多可以同时运行 10,000 个计时器。
  • console.timeEnd()– 停止指定的计时器并记录自启动以来经过的时间(以毫秒为单位)。

常见的一种场景是计算程序执行时间,以跟踪操作所需的时间。这便可以通过使用console.time()启动计时器并传入标签,然后通过相同的标签使用console.timeEnd()结束计时器来实现。甚至还可以使用console.timeLog()在长时间运行的操作中添加标记。

// 定义一个函数,模拟一个耗时的计算过程
function calculateSomething() {
  let sum = 0;
  for (let i = 0; i < 1000000000; i++) {
    sum += i;
  }
  return sum;
}

// 使用 console.time() 开始计时,并给计时器命名
console.time('Calculation Time');

// 执行耗时的函数
const result = calculateSomething();

// 使用 console.timeEnd() 结束计时,并打印经过的时间
console.timeEnd('Calculation Time');

// 如果在计算过程中想要添加额外的标记点,可以使用 console.timeLog()
console.time('Calculation Time');
console.log('中间点输出'); // 假设在某个中间点输出日志
console.timeLog('Calculation Time', '中间点标记'); // 添加标记

// 再次执行耗时的计算
calculateSomething();
console.timeEnd('Calculation Time'); // 结束计时

在这里插入图片描述

性能分析

我们已经知道通过 console.time()console.timeEnd() 我们可以了解一段代码的运行时间。

但是,如果我们需要分析较为复杂的 JavaScript 逻辑代码,想要从中找出程序运行的性能瓶颈,假如继续使用 console.time() 方法,意味着我们需要大量的插入该方法,这显然是笨拙的,不推荐大家这么搞。

相对于复杂逻辑的 JavaScript 程序调优,此时 console.profile()console.profileEnd() 便派上用场了。通过新建一个性能分析器(基于cpu的使用情况),使之成为函数性能分析的利器。

用法和 console.time() 的一样,console.profile()开始,console.profileEnd()结束,需要传递一个参数作为标签使用,通俗来说,就是为这个性能分析器起个名字。看下如下代码,我们测试几种不同for循环书写方式的耗时情况:

// 简单新建一个数组吧,新建一个一百万个成员为1的数组
let arr = new Array(1000000).fill(1);
    
// 第一种for循环书写方式    
function forFun1 () {
    for (let i = 0, len = arr.length; i < len; i++) {}
}

// 第二种for循环书写方式    
function forFun2 () {
    for (let i = arr.length; i --; ) {}
    forFun1();
}
// 第三种for循环书写方式  
function forFun3 () {
    for (let i = 0, item; item = arr[i++]; ) {}
}
// 执行三个函数  
function fun () {
  forFun1();
  forFun2();
  forFun3();
}

// 立即开始一个性能分析器
console.profile('测试for循环');
fun();
//
console.profileEnd('测试for循环');

打开控制台运行如上程序:

在这里插入图片描述

嗯,打印了两句话,性能分析器开启和结束。这就完了??

在哪儿查看性能分析结果呢?别急,继续往下看

在这里插入图片描述

在控制台可以找到这个 javaScript性能分析器,英文 javaScript Profiler, 如果你在自己浏览器找不到, 可能是你没有启动这个试验性功能。

在这里插入图片描述

设置中找到实验, 然后开启即可。

打印计次

console.count() 是一个在浏览器控制台中用于计数的 API,它允许开发者在调试过程中跟踪函数调用的次数或某些特定代码块的执行次数。

例如, 在React开发中, 想要跟踪一个子组件被渲染的次数:

class MyComponent extends React.Component {
  render() {
    console.count('MyComponent 渲染次数');
    return (
      <div>这是一个组件</div>
    );
  }
}

在这里插入图片描述

在这个例子中,每次 MyComponent 组件渲染时,控制台都会显示渲染次数的计数器。

堆栈跟踪

console.trace() 是一个非常有用的浏览器控制台方法,它可以在代码的特定位置插入一个跟踪点,然后输出一个堆栈跟踪,显示调用堆栈的每一层。这对于调试复杂的函数调用和理解代码执行流程非常有用。

举个例子,在React性能优化中,console.trace() 可以用来追踪性能瓶颈的来源。通过在关键的渲染或更新方法中插入跟踪点,可以了解哪些操作占用了大量时间。

class PerformanceComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    console.trace('shouldComponentUpdate 跟踪');
    return nextProps.data !== this.props.data;
  }

  componentDidUpdate(prevProps, prevState) {
    console.trace('componentDidUpdate 跟踪');
    // 执行更新后的操作
  }

  render() {
    const { data } = this.props;
    return (
      <div>数据: {data}</div>
    );
  }
}

打印表格

console.table()方法将对象/数组打印为格式整齐的表格,还是以上面dog对象为例:

在这里插入图片描述

分组打印

当存在很多输出信息时,你可能想对它们进行组织。一个小而有用的工具是 console.group()console.groupEnd()。所有在console.groupconsole.groupEnd之间的console调用都会被分组在一起。调用groupEnd()减少一个级别(回到上一个层级)。

console.group('Console');
console.log('warin', "警告");
console.log('error', "错误");
console.log('info', "提示");
console.groupCollapsed('Log');
console.log('%c 自定义样式', "color:red");
console.log('%O', {a:1});
console.log('%d', 12.1);
console.groupEnd();
console.groupEnd();

在这里插入图片描述

console.log() 进阶

console.log() 除了上面说的基本用法,还支持下面这些输出方式。

自定义CSS样式输出

console.log(`岁月神偷,歌手:%c 金玟岐 `, 'color: #fff;font-size:24px; background:#045133')

在这里插入图片描述

支持占位修饰符 %c来自定义样式。

格式化输出内容

输出格式化的字符串,除了使用占位符 %c来定义 css样式, 还支持以下几种占位符:

占位符描述
%s字符串
%d / %i整数
%f浮点数
%o / /%Oobject对象
const dog = {
    name:"阿黄",
    age: 1.5,
    friends: 12
}
console.log('名字: %s, 年龄: %f, 好友:%d ',dog.name, dog.age, dog.friends)

// 输出:名字: 阿黄, 年龄: 1.5, 好友数:12

%o / /%O 虽然都指对象,但%o 表示DOM对象:

在这里插入图片描述

%O 则表示javaScript对象, 我们可以打印一下上面的dog对象:

在这里插入图片描述

大家可能觉得,我直接简单的console.log(xxx)输出就行,为什么还要了解这些占位符?

占位符这种写法在复杂的输出时,能保证模板和数据分离,结构更加清晰。

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

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

相关文章

Qt快速入门(MV架构之TableView + QStandardItemModel + 自定义代理小案例)

Qt快速入门&#xff08;MV架构之TableView QStandardItemModel 自定义代理小案例&#xff09; 关于MV架构的简单介绍 在Qt框架中&#xff0c;代理&#xff08;Delegate&#xff09;、模型&#xff08;Model&#xff09;和视图&#xff08;View&#xff09;之间的关系构成了…

jvisualVM分析jvm内存使用快照dump

服务发生内存溢出&#xff0c;就需要查看服务器上Java服务的jvm堆内存使用情况&#xff0c;可以使用dump命令生成dump文件&#xff0c;然后下载到本地&#xff0c;然后使用jvisualVM工具打开&#xff0c;即可实现可视化分析。 生成dump文件常用的两种方式&#xff1a; 第一种…

linux fixmap分析

本文基于Linux-4.19.125&#xff0c; ARM V7&#xff0c;dual core, MMU采用2级页表&#xff08;未开启LPAE&#xff09;。 1 为什么需要fixmap Linux内核启动过程中&#xff0c;经过汇编阶段后&#xff0c;mmu功能已经开启&#xff0c;后续只能通过虚拟地址来访问DDR&#x…

RAG应用开发实战02-相似性检索的关键 - Embedding

1 文本Embedding 将整个文本转化为实数向量的技术。 Embedding优点是可将离散的词语或句子转化为连续的向量&#xff0c;就可用数学方法来处理词语或句子&#xff0c;捕捉到文本的语义信息&#xff0c;文本和文本的关系信息。 ◉ 优质的Embedding通常会让语义相似的文本在空…

Linux 添加启动服务--Service

1&#xff0c;服务配置service文件 Service 服务的实际作用是开启后自动启动服务&#xff0c;运行一些不须要登录的程序&#xff0c;任务。 实例1、上电自动连接WIFI热点 1.1 新建.service文件 /etc/systemd/system/wificonnect.service [Unit] DescriptionService [wifico…

记录linux从0部署java项目(宝塔)

目录 一、安装宝塔可视化界面 二、部署前端 三、部署后端 1、配置并连接Mysql数据库 2、配置并连接redis 3、安装jdk 这里先记录一个安装后遇到的问题 安装openJDK 四、检查 一、安装宝塔可视化界面 宝塔面板下载&#xff0c;免费全能的服务器运维软件 运行安装脚本 安…

MySQL 社区版 安装总结

很早就安装过MySQL&#xff0c;没有遇到过什么问题&#xff0c;直接next就行了&#xff0c;这次在新电脑上安装却遇到了一些问题&#xff0c;记录一下。 安装的是MySQL社区版&#xff0c;下载地址是www.mysql.com&#xff0c;进入后选择DOWNLOAD页面&#xff0c;选择MySQL Com…

基本的数据类型在16位、32位和64位机上所占的字节大小

1、目前常用的机器都是32位和64位的&#xff0c;但是有时候会考虑16位机。总结一下在三种位数下常用的数据类型所占的字节大小。 数据类型16位(byte)32位(byte)64位(byte)取值范围char111-128 ~ 127unsigned char1110 ~ 255short int / short222-32768~32767unsigned short222…

HarmonyOS实战开发-自定义通知角标、如何设定应用的桌面图标角标的功能。

介绍 本示例主要展示了设定应用的桌面图标角标的功能&#xff0c;使用ohos.notificationManager 接口&#xff0c;进行桌面角标的设置&#xff0c;通知的发送&#xff0c;获取等。 效果预览 使用说明 在使用本应用时&#xff0c;需安装并启动仿桌面应用&#xff1b;在主界面…

LeetCode 57—— 插入区间

阅读目录 1. 题目2. 解题思路3. 代码实现 1. 题目 2. 解题思路 第一步&#xff0c;我们先寻找新区间和原始区间列表的重叠部分。 假设新区间为 [ x 1 , x 2 ] [x_1, x_2] [x1​,x2​]&#xff0c;原始区间列表中的其中一个区间为 [ y 1 , y 2 ] [y_1, y_2] [y1​,y2​]&…

PostgreSQL入门到实战-第三十弹

PostgreSQL入门到实战 PostgreSQL教程网站官网地址PostgreSQL概述更新计划 PostgreSQL教程网站 https://www.postgresqltutorial.com/ 官网地址 声明: 由于操作系统, 版本更新等原因, 文章所列内容不一定100%复现, 还要以官方信息为准 https://www.postgresql.org/PostgreS…

【数据工具】ArcGIS批量出图工具箱

工具下载链接&#xff1a;数据下载链接 我们在使用Arcgis制图的过程中&#xff0c;经常会遇到需要大量出图的情况&#xff0c;如何将做好的图批量导出jpg是一件令人头疼的问题。 今天小编就给大家分享俩个ArcGIS批量出图的工具箱&#xff0c;一个可以批量导出图层为jpg&#…

运筹说 第112期 | M/M/s等待制排队模型

通过上期学习&#xff0c;大家已经了解了排队论中的一些基本概念&#xff0c;以及生灭过程和Poisson过程。 那么本期小编将基于这些基本原理&#xff0c;为大家介绍M/M/s混合制排队模型&#xff0c;包括单服务台模型和多服务台模型&#xff0c;介绍模型的概念以及推导过程等内容…

PoE 技术

1 PoE 技术产生背景 随着 WLAN 、 VoIP 、网络视频监控等新业务的飞速发展,大量的无线 LAN 访问点、 IP 电话、 IP 网络摄像头等基于 IP 的终端出现在工业现场。这些设备通常数量众多、位置特殊 、 布线复杂、设备取电困难,其实施部署不仅消耗大量人力物力,…

【数据结构与算法】搜索算法(深度优先搜索 DFS和广度优先搜索 BFS)以及典型算法例题

目录 搜索算法&#xff08;深度优先搜索DFS和广度优先搜索BFS&#xff09;以及典型算法例题深度优先搜索 &#xff08;Depth First Search 简称 DFS&#xff09;DFS 的设计步骤深度优先搜索&#xff08;DFS&#xff09;算法例题例题一&#xff1a;N皇后问题例题二&#xff1a;路…

FreeRTOS学习 -- FreeRTOSConfig.h介绍

一、FreeRTOSConfig.h文件 FreeRTOS 的系统配置文件为 FreeRTOSConfig.h&#xff0c;在此配置文件中可以完成 FreeRTOS 的裁剪和配置。 FreeRTOS 的配置基本是通过在 FreeRTOSConfig.h 中使用“#define”这样的语句来定义宏定义实现的。在 FreeRTOS 的官方 demo 中&#xff0…

CentOS7离线升级OpenSSH_8.8p1

一、环境 centos7.9,升级openssh到8.8p1最新版本 二、下载升级包 # openssl和zlib为相关依赖 wget https://cdn.openbsd.org/pub/OpenBSD/OpenSSH/portable/openssh-8.8p1.tar.gz wget https://www.openssl.org/source/openssl-1.1.1j.tar.gz wget http://www.zlib.net/zl…

mysql dll文件的缺失和Can‘t connect to MySQL server on ‘localhost‘ (10061)

个人笔记&#xff08;整理不易&#xff0c;有帮助&#xff0c;收藏点赞评论&#xff0c;爱你们&#xff01;&#xff01;&#xff01;你的支持是我写作的动力&#xff09; 笔记目录&#xff1a;学习笔记目录_pytest和unittest、airtest_weixin_42717928的博客-CSDN博客 个人随笔…

数学:人工智能学习之路上的“拦路虎”及其背后的奥秘

在人工智能的浪潮席卷全球的今天&#xff0c;越来越多的人开始涉足这一领域&#xff0c;以期掌握其核心技术&#xff0c;为未来的科技发展贡献力量。然而&#xff0c;在学习的道路上&#xff0c;许多人却遇到了一个不小的挑战——数学。为何数学会成为学习人工智能的“拦路虎”…

js学习总结

这里写目录标题 前情提要JavaScript书写位置1. 内部javaScript (不常用)2. 外部javaScript (常用)3.内联javaScript (常用) js中的输入和输出输出语法1. document.write()2. alert()3. console.log() 输入语法prompt() 前情提要 1. 在javaScript中的 分号 是可以省略的JavaScr…