控制台快速查看自己的log，提高开发效率

前言

对于每一个前端程序员来说，console一下看看后端返回了什么值,文件解析出了什么值,组件传了什么值等等是非常常见的操作。但令人遗憾的是历经几家公司，大家的控制出总是充斥着无数的

内部第三方包的日志
内部通用方法（调接口，登录等）的日志
各种微前端初始化子应用导致的一些值找不到，或者vue被二次初始化导致的大量warning
各种异步函数在初始化没有值时没有try catch导致的typeError 或者 undeifned等等日志
甚至还有大量的人为输出日志混杂其中

以上种种导致你的console被淹没在人海，而我们的诉求也非常的简单，就是快速的找到我打印的这个值是什么 。本来2025年了这种诉求应该非常简单，但上网一搜都是在用console炫技，搞一堆有的没的，插入图片的都来了。真的有人会没事干在控制台里插图片么？工作量不饱和么？

利用console.log('c%')

使用占位符可以为你的console添加一些自定义样式，使他在控制台中脱颖而出，方便你快速找到。关于这部分用法不再赘述，已经烂大街了。

js 复制代码

const fuck = 1111;
console.log('%c🚀---   fuck   ---', 'color: #fff; background: green; padding: 2px 6px;border-radius: 3px;', fuck)

利用插件Turbo Console

每次都要写一长串长长的console非常降智，所以可以将他封装成一个方法在项目中快速调用。但是单独为了看日志这么做也挺傻的，而且控制台一堆乱七八糟东西的公司你封装了也大概只有你用，没必要在项目中加这种。借助现有插件满足自己的诉求即可。

本来想直接让AI帮我完成插件配置，但试了几次都是不行。又搜了几篇文章也是废话和乱七八糟配置一大堆还不能用。下面是我自己的配置

操作流程如下

拓展商店搜索安装Turbo Console
ctrl + shift + p 打开vscode搜索框，输入：settings.json，选择用户区设置

复制粘贴这段代码简单来讲就是 你打印变量 的前后缀，以及他的样式，将他调整为上一节中console的格式即可。

json 复制代码

{
    "turboConsoleLog.logMessageSuffix": "   ---', 'color: #fff; background: green; padding: 2px 6px;border-radius: 3px;",
    "turboConsoleLog.logMessagePrefix": "%c🚀---",
    "turboConsoleLog.quote": "'",
    "turboConsoleLog.delimiterInsideMessage": " "
}

ctrl + s 保存被配置
回到你的文件
ctrl + shift + p 打开vscode搜索框，输入：Develop：reload window找到重启windows窗口使插件的配置得到更新。

双击选中你想要打印的变量，ctrl + k 摁两次或者 shift + alt + l 快速生成console
最终结果

插件的其他快捷键

ctrl + alt + l 选中变量之后，使用这个快捷键生成 console.log
alt + shift + c 注释所有 console.log
alt + shift + u 启用所有 console.log
alt + shift + d 删除所有 console.log

利用控制台过滤

虽然一系列方法使得日志在控制台脱颖而出了，但有些控制台的日志量简直是Amazing Unbelievable!!! 所以结合上一步插入的小图标：🚀，直接在控制台过滤，世界立马就安静了。

当然这有一个弊端，就是当你发现别人的console 怎么没输出的时候，一定要记得你开了过滤，要把过滤去掉。