利用console提高写bug的效率

前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

自从入坑前端后,日常写bug就没离开过console。

要说用得多,不如说是console.log用得多,console.warn和console.error配合使用下,几乎就是我的使用日常了。

开发调试场景各式各样,小问题很容易hold得住,问题一复杂,这打印出来的是啥玩意?眼花脑糊。

为了提高写bug效率(不是),我去了解了console的各种玩法。

丰富的文本打印姿势

使用字符串替换

有点C语言的printf那味,对字符串进行格式化输出。

替代字符串说明
%o or %O替换成JavaScript对象
%s替换成字符串
%d or %i替换成整数,支持数字格式化,例如console.log("Foo %.2d", 1.1),会输出Foo 01
%f替换成浮点数,支持数字格式化,例如console.log("Foo %.2d", 1.1),会输出Foo 1.10
const person = {name: 'Amy',age: 18, contact: {phone: 123456789,email: 'amy@gmail.com'}
}

如果是打印字符串,用模板字符串也能有类似的效果。

image.png

如果是打印字符串+对象,可以通过传多个参数打印,或者使用字符串替换,写法更清晰舒适些。

image.png

定义内容样式

%c表示为该指令后的文本使用特定的CSS样式。

image.png

 

image.png

借助这个能力,我们可以在控制台中打印出这样的版本号:

image.png

function printVersion(name, version) {console.log(`%c${name}%cv${version}`,'color: white;padding: 4px 6px;border-radius: 4px 0 0 4px;background-color: #515151','color: white;padding: 4px 6px;border-radius: 0 4px 4px 0;background-color: #0575b7');
}

字符串中有两个%c,值得注意的是,第二个%c无法继承第一个%c的样式,比如其中的color: white;padding: 4px 6px,可见%c作用的文本样式都是独立的。

%c支持background属性,也就意味着background-image可以作用起来打印图片了,有兴趣的可以玩一玩看。(这个我没有测试成功,甚至直接copy了别人打印成功的代码,就奇怪。先pass了,后面研究下)

只会用console.log吗?

console提供了5种打印信息的方法,最常用的当属console.log,其次是console.warn和console.error,最后是console.info和console.debug。

console.warn、console.error

跟其他方法相比,console.warn和console.error能很明显表达出对应的日志级别,主要体现在:

  1. 在控制台中显示效果差异较大。
  2. 抛出堆栈信息。
  3. 源码中高亮提示。

image.png

image.png

这对于问题提示和定位均有较大的帮助,在别人阅读到自己代码的时候,也能推测出这个位置可能是处理错误场景。

console.log、console.info、console.debug的区别

很多人都搞不清楚这三个方法的区别在哪里,在控制台打印出来效果几乎没差,或者说其他功能我们不怎么需要?看下文档说明:

console.log: 向控制台打印消息。

console.info: 向控制台打印消息,仅在Firefox中,输出日志旁边会有一个小的"i"图标。

image.png

console.debug: 向控制台打印“调试”级别的消息,浏览器默认情况下不会显示该消息,需要调整控制台日志级别的过滤选项,使其支持Debug或Verbose后才会显示。

image.png

大部分时候我们只是想打印消息而已,就挑个最短的console.log来用了。

提高debug效率的小技巧

这是一个🌰

const isStudent = true;
const onLine = false;
const person = {name: 'Amy',age: 18, contact: {phone: 123456789,email: 'amy@gmail.com'},followers: [{ name: 'Anna', email: 'anna@gmail.com' },{ name: 'Bob', email: 'bob@gmail.com' },{ name: 'Robin', email: 'robin@gmail.com' },{ name: 'Arthur', email: 'arthur@gmail.com' }]
}

1. 打印变量值

在控制台打印多个变量,尤其是同类型的变量,我们需要进行标识,比如:

image.png

应该很多人都会这么操作,我曾经还出现过标识错误的大乌龙,可以这么写:

image.png

输出内容是一样的,更便捷准确。

2. 快速查看对象

在控制台查看数组or对象,经常是收起来的,内容比较多会被直接省略:

image.png

改成表格输出,可读性一下子就上来了,相当舒适。

image.png

再者,我们往往仅关心某个数据/字段,你还可以指定要查看哪些列(字段),针对性处理。

image.png

3. 分组打印

在调试函数,尤其是定位执行过程时:

function b() {console.log('This is b');console.log('Test');
}
function a() {console.log('This is a');console.log('Test1');b();console.log('Test2');
}
a();

image.png

即使做了标识,一时间还是很难辨别Test2是哪个方法打印出来的。

这种时候,推荐使用console.group()/console.groupCollapsed()进行分组打印,console.groupEnd()则用来闭合分组。

function b() {console.group('This is b');console.log('Test');console.groupEnd();
}
function a() {console.group('This is a');console.log('Test1');b();console.log('Test2');console.groupEnd();
}
a();

image.png

分组打印支持嵌套,这种打印效果直观不少,面对复杂逻辑时,这种方式性价比更高。

4. 统计执行次数

console.count()对输出的内容进行次数统计,可以用于调试方法是否被多次调用,比如React v18: Why useEffect Suddenly Got Crazy?就有现成的例子,统计useEffect回调被调用的次数:

image.png

console.countReset()可进行重置。

5. 统计执行时间

统计方法执行耗时也是可能遇到的调试手段,console也提供了快速的计时通道:

image.png

console.time()启动计时,可以为该计时提供名称,否则使用default。

在计时期间,可以通过console.timeLog()实时查看。

完成计时后,使用console.timeEnd()结束计时。

结尾

以上简单整理了开发过程中可能会遇到的console用法,还有好些方法未提及,比如console.dir()、console.dirxml()等,有兴趣的可以去MDN上了解下。

前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

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

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

相关文章

2023年最佳JavaScript框架:React、Vue、Angular和Node.js的比较

文章目录 React:构建用户界面的首选Vue:简单优雅的前端框架Angular:Google支持的全面框架Node.js:服务器端的JavaScript运行环境比较不同框架的优势与劣势React:Vue:Angular:Node.js&#xff1a…

微服务架构1.0

微服务架构 微服务架构是一种应用程序架构模式,将一个应用程序划分为一组小型、独立、自治的服务,每个服务专注于一个特定的业务功能。 每个微服务都可以独立开发、部署、扩展和维护,通过定义良好的接口和协议,它们可以相互通信…

怎么查看小程序中的会员信息

商家通过查看会员信息,可以更好地了解用户,并为他们提供更个性化的服务和推荐。接下来,就将介绍如何查看会员信息。 商家在管理员后台->会员管理处,可以查看到会员列表。支持搜索会员的卡号、手机号和等级。还支持批量删除会员…

【Python】数据分析工具之各种图

1 漏斗图 漏斗图描述状态阶段的顺序递进关系,属于序列类图表 import plotly.express as pxdata dict(number[39, 27.4, 20.6, 11, 2],stage["Website visit", "Downloads", "Potential customers", "Requested price", &…

Spring JdbcTemplate(使用详解)

企业级应用开发中,很少有人直接使用原生的 JDBC API 进行开发,因为使用 JDBC API 对数据库进行操作十分繁琐,例如我们需要手动控制数据库连接的开启,异常处理、事务处理、最后还要手动关闭连接释放资源等等。 Spring 提供了一个 S…

营销活动:提升小程序的用户活跃度的关键

在现今竞争激烈的商业环境中,小程序已成为企业私域营销的重要工具之一。然而,拥有一个小程序并不足以保证用户的活跃度。营销活动作为推动用户参与的有效方式,对于提升小程序的用户活跃度起着至关重要的作用。本文将深入探讨营销活动在提升小…

K8s+Docker+KubeSphere+DevOps笔记

K8sDockerKubeSphereDevOps 前言一、阿里云服务器开通二、docker基本概念1.一次构建、到处运行2、docker基础命令操作3、docker进阶操作1.部署redis中间件2.打包docker镜像 三、kubernetes 大规模容器编排系统1、基础概念:1、服务发现和负载均衡2、存储编排3、自动部…

QTreeWidget——信号处理

文章目录 基本属性信号一、信号种类二、信号测试1、currentItemChanged、itemCollapsed、itemExpanded三个信号的测试2、itemActivated信号3、 itemChanged信号4、其余信号的测试代码(包含以上代码) 基本属性 信号 一、信号种类 //当前项发生变化时触…

uniapp 顶部头部样式

<u-navbartitle"商城":safeAreaInsetTop"true"><view slot"left"><image src"/static/logo.png" mode"" class"u-w-50 u-h-50"></image></view></u-navbar>

使用Pandas处理Excel文件

Excel工作表是非常本能和用户友好的&#xff0c;这使得它们非常适合操作大型数据集&#xff0c;即使是技术人员也不例外。如果您正在寻找学习使用Python在Excel文件中操作和自动化内容的地方&#xff0c;请不要再找了。你来对地方了。 在本文中&#xff0c;您将学习如何使用Pan…

怎样做好日志分析?

首先我们要知道日志分析是指检查并理解计算机生成的日志消息&#xff0c;例如日志事件或审计来跟踪记录&#xff0c;通过日志分析可以帮助您诊断和解决计算机系统中的问题&#xff0c;以及监视系统性能和安全性。 如果您想知道您的网络中发生了什么&#xff0c;以便洞察潜在的…

5.4 汇编语言:算数运算指令集

算术运算指令集是计算机中的一组基本操作&#xff0c;用于对数字执行常见的算术运算操作。这些指令都是计算机中非常基础的运算指令&#xff0c;可以用于实现所有常见的算术运算操作&#xff0c;并可以通过组合使用实现更加复杂的数学运算。在实际编程中&#xff0c;程序员可以…

面试题-React(四):React中的事件绑定如何实现?有几种方式?

一、React事件绑定机制 在React中&#xff0c;事件绑定是通过JSX语法来实现的。你可以将事件处理函数直接绑定到元素的属性上&#xff0c;比如onClick、onMouseOver等。当触发相应事件时&#xff0c;绑定的事件处理函数将被调用。 React采用了一种合成事件&#xff08;Synthe…

玄子Share - HTML Emmet 语法详细介绍

玄子Share - HTML Emmet 语法详细介绍 以下Emmet语法 基于WebStorm 2023.2演示 Emmet 语法介绍 Emmet 是一种缩写语法&#xff0c;旨在简化 HTML 和 CSS 的编写。它基于 CSS 选择器的语法结构&#xff0c;通过输入特定的缩写&#xff0c;可以快速生成 HTML 结构。 Emmet 语法…

安卓修改SwitchCompat色值

SwitchCompat控件色值跟系统设置的主题有关&#xff0c;但是主题效果不是能轻易就能改的&#xff0c;因为涉及到整个APP的样式。网上方案基本都是通过修改style文件来改变色值&#xff0c;经过多次尝试修改最终觉得单独修改控件色值比较好。 一、控件属性 //修改开关色值就是最…

面试之快速学习STL-multimap

multimap multimap 容器也用于存储 pair<const K, T> 类型的键值对&#xff08;其中 K 表示键的类型&#xff0c;T 表示值的类型&#xff09;其中各个键值对的键不能做修改&#xff1b;该容器也会自行根据键的大小对存储的所有键值对做排序操作。和 map 容器的区别在于&…

Linux相关知识点

Linux是什么&#xff1f; Linux是一套免费使用和自由传播的类Unix操作系统&#xff0c;是一个基于POSIX和UNIX的多用户、多任务、支持多线程和多CPU的操作系统。它能运行主要的UNIX工具软件、应用程序和网络协议。它支持32位和64位硬件。 Linux内核 是一个Linux系统的内核&…

【JUC】线程池ThreadPoolTaskExecutor与面试题解读

1、ThreadPoolTaskExecutor 创建线程池 从它的创建和使用说起&#xff0c;创建和使用的代码如下&#xff1a; 创建&#xff1a; ThreadPoolTaskExecutor executor new ThreadPoolTaskExecutor();executor.setCorePoolSize(corePoolSize);executor.setMaxPoolSize(maxPoolSize…

Python web实战之细说Django的集成测试

关键词&#xff1a; Python Web开发、Django、集成测试、实战、测试驱动开发、自动化测试、Selenium、测试框架、测试用例、代码覆盖率、持续集成 今天给大家分享一下Python Web开发——Django的集成测试&#xff0c;如何利用集成测试来提高代码质量、减少bug。 1. 什么是集成…

Apache Zookeeper架构和选举机制

ZooKeeper是一个开源的分布式协调服务,旨在解决分布式系统中的一致性、配置管理、领导者选举等问题。它由Apache软件基金会维护,是Hadoop生态系统的一部分,被广泛用于构建高可用、可靠和具有一致性的分布式应用程序和服务。 ZooKeeper提供了一个层次化的命名空间,类似于文…