前端console用法分享

本文主要分享前端console的高级用法。介绍了常见控制台方法,如打印时间可计算程序执行时间;性能分析适用于复杂JavaScript逻辑调优;打印计次可跟踪函数调用次数;堆栈跟踪能辅助调试复杂函数调用;还有打印表格、分组打印等,此外还提及console.log的进阶输出方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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)输出就行,为什么还要了解这些占位符?

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

<think>好的,我现在需要解决用户的问题:如何在IntelliJ IDEA中查看前端console.log输出。首先,我得回忆一下用户提供的引用内容,尤其是引用[4]提到了后端服务器的日志输出,但用户现在关心的是前端部分。 接下来,我得考虑前端通常在哪里输出日志。一般来说,前端代码如JavaScript或Vue.js中的console.log会在浏览器的开发者工具中显示,而不是直接在IDE里。不过,用户可能是在问如何在IDEA中直接查看这些日志,或者是否有集成的方式。 查看引用[1]中提到的控制台编码设置,虽然主要解决乱码问题,但说明IDEA的控制台输出可能需要配置。不过前端控制台通常不在IDE里,除非使用内置的浏览器或调试工具。引用[4]中的后端代码使用app.listen,但用户需要的是前端日志。 可能需要指导用户使用内置终端运行前端服务器,或者配置调试模式。例如,如果用户使用npm启动本地服务器,控制台输出会在IDEA的Run或Debug窗口中显示。或者,使用内置的浏览器并通过调试工具查看。 另外,用户可能混淆了前后端日志的位置,需要明确区分。前端日志应在浏览器中查看,而IDEA主要处理后端或构建过程中的日志。因此,正确的步骤可能包括启动前端服务器,然后在浏览器中打开开发者工具。 还要检查是否有插件或配置可以让前端日志显示在IDEA中,比如使用JavaScript调试器或集成浏览器控制台。可能需要指导用户使用Chrome插件或配置运行配置来捕获日志。 最后,确保回答符合格式要求,使用中文,正确引用,并生成相关问题。需要结构清晰,分步骤说明,并引用相关的参考资料中的解决方法,如设置编码或查看运行控制台的位置。</think>在 IntelliJ IDEA 中查看前端代码(如 Vue.js/JavaScript)的 $console.log$ 输出,需通过以下步骤实现: --- ### 方法 1:通过内置终端查看 1. **运行前端服务** 在 IDEA 中启动本地开发服务器(如 `npm run serve` 或 `yarn start`),控制台日志会直接输出到 IDEA 的 **Run** 或 **Debug** 窗口中。 ```bash npm run serve ``` 2. **定位输出位置** - 运行后,日志会显示在 IDEA 底部的 **Run** 标签页中。 - 若未自动显示,可通过菜单栏的 **View > Tool Windows > Run** 手动打开[^4]。 --- ### 方法 2:通过浏览器开发者工具查看 1. **打开浏览器控制台** 前端 $console.log$ 的默认输出位置是浏览器的开发者工具控制台(如 Chrome 的 DevTools)。 - 快捷键:`F12` 或 `Ctrl+Shift+I`(Windows)/ `Cmd+Option+I`(Mac)。 - 在浏览器中右键页面,选择 **检查(Inspect)** > **Console** 标签。 2. **配置 IDEA 内置浏览器(可选)** 若使用 IDEA 内置浏览器(需安装插件如 **JavaScript Debugger**),控制台日志会直接集成到 IDEA 的 **Debug** 工具窗口中。 --- ### 方法 3:调试模式下捕获日志 1. **配置调试运行** - 在 IDEA 中创建 JavaScript 调试配置:**Run > Edit Configurations > + > JavaScript Debug**。 - 设置 URL 为前端服务地址(如 `http://localhost:8080`)。 2. **启动调试会话** 点击调试按钮(🐞),IDEA 会自动打开浏览器并附加调试器。此时 $console.log$ 输出会同步到 IDEA 的 **Debugger > Console** 标签中。 --- ### 编码问题排查(如日志乱码) 若控制台输出乱码,需检查 IDEA 的编码设置: 1. 修改 **File > Settings > Editor > File Encodings**,确保全局编码为 $UTF-8$[^1]。 2. 在 `idea64.exe.vmoptions` 中添加 `-Dfile.encoding=UTF-8`[^1]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值