当前位置: 首页 > news >正文

前端调试只会console.log()?

前言

相信大家在日常开发中调试代码是必不可少的步骤,毕竟谁也不能保证代码不出问题,总得debug一下,输出信息看看数据有没有问题。是不是习惯性console.log(‘XXX’)或者debugger呢。而JavaScript中的console对象提供了丰富的方法用于更灵活的开发者交互。除了大家熟知的console.log之外,还有一系列强大的方法可供使用。

比如console.info、console.warn和console.error,能够以不同级别输出信息,更清晰地表达代码的执行状态。console.table则可将对象数组以表格形式呈现,方便查看结构化数据。在处理性能问题时,console.time和console.timeEnd用于计算代码执行时间,而console.trace提供当前调用栈的追踪信息。

console.info、console.warn、console.error

console.info()、console.warn()、console.error(): 用于输出不同级别的日志信息,可以帮助我们了解代码的执行流程和可能的问题。通常用于普通日志、信息性日志、警告和错误信息的输出。如果代码中有很多个输出,控制台可能就会很混乱,这时候还可以使用console.warn()、console.error()打印出不同的信息。
比如:

const a = { name: '张三', edge: 20 };
console.log('This is a log message', a.name);
console.info('This is an informational message', a.name);
console.warn('This is a warning message', a.name);
console.error('This is an error message', a.name);

在这里插入图片描述

console.time()、console.endTime()

有时候数据很多并且处理的逻辑还挺复杂,经过我们一番操作后总是会担心会不会很耗时,这时候就可以测试代码执行的时间,如果页面渲染过慢就能排查是不是某些逻辑写的太耗性能了。

 console.time('Timer');
for (let i = 0; i < 10000; i++) {}
console.timeEnd('Timer');
console.time('Timer2');
for (let i = 0; i < 100000000; i++) {}
console.timeEnd('Timer2');

在这里插入图片描述

console.trace()

输出当前调用栈的追踪信息,用于查看函数的调用路径。如果想知道一个函数是何时被调用的,console.trace()就能显示函数的调用链。

 <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>function foo() {console.trace('Trace message');}function test() {return foo();}foo();test();</script></body>
</html>

在这里插入图片描述

console.table()

前端用数组结构还是挺多的,有时候想打印出更清晰的数据结构,就可以用console.table()了,它适用于输出对象数组的信息,以表格形式展示,有助于清晰地查看对象的属性。

<script>
const myArray = [{ name: 'John', age: 30 },{ name: 'Jane', age: 25 },];console.table(myArray);
</script>

在这里插入图片描述

console.clear()

很多时候正在调试bug,在控制台打印信息,但控制台可能会出现一些警告或者其他报错,我们需要的信息就会不容易发现,这时候就可以使用console.clear()。清空输出了

console.assert()

断言,如果条件为 false,则输出一条错误消息。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>console.assert(1 + 3 === 5, '第一个报错了');console.assert(1 + 3 === 4, '第二个报错了');</script></body>
</html>

在这里插入图片描述
当然还有其他的,这里就不一一举例了比如:

  • console.timeLog(): 输出指定计时器的当前运行时间。
  • console.profile() 和 console.profileEnd(): 用于性能分析,开始和结束记录分析数据。
  • console.group() 和 console.groupEnd(): 用于将一系列相关的日志信息分组,使输出更有组织,特别是在复杂的应用中。
http://www.lryc.cn/news/235707.html

相关文章:

  • CentOS Linux release 7.9.2009 (Core)中安装配置Tomcat
  • 移动机器人路径规划(四)--- 考虑机器人模型下的运动规划KINODYNAMIC PATHFINDING
  • 服务器数据恢复—VMware虚拟化下误操作导致服务器崩溃的数据恢复案例
  • 微服务实战系列之Gateway
  • GZ038 物联网应用开发赛题第10套
  • 重生之我是一名程序员 35
  • 计算机毕业设计选题推荐-点餐微信小程序/安卓APP-项目实战
  • 分享禁止Win10更新的两种方法
  • SPASS-回归分析
  • 【使用vscode在线web搭建开发环境--code-server搭建】
  • c++ list容器使用详解
  • 【案例】可视化大屏
  • js制作动态表单
  • 解决Kibana初始化失败报错: Unable to connect to Elasticsearch
  • 流媒体服务器
  • Java GUI小程序之图片浏览器
  • Kafka-4.1-工作原理综述
  • Linux八股文
  • SPASS-偏相关分析
  • 第二证券:今日投资前瞻:小米汽车引关注 全球风光有望持续高速发展
  • Docker中的RabbitMQ已经启动运行,但是管理界面打不开
  • 自动化网络图软件
  • 如何基于亚马逊云科技打造高性能的 SQL 向量数据库 MyScale
  • 《轻松入门!快速安装PyCharm,打造高效Python编程环境》
  • Golang环境搭建Win10(简洁版)
  • 【算法每日一练]-分块(保姆级教程 篇1)POJ3648
  • 【华为OD题库-026】通过软盘拷贝文件-java
  • 定量数据和定性数据
  • 【Linux】:体系结构与进程概念
  • react-router-dom 版本6.18.0中NavLink的api和属性介绍