Console.log 重度使用者!必备的 2 个 VSCode 神级插件!

如果你写 JavaScript / TypeScript / Node / 前端框架时,一天能敲几十条 console.log,却还在 DevTools 和编辑器之间疯狂切窗口!

那么请立刻把这 2 个插件装进 VSCode------写日志、看结果、一键清场,全部在 5 秒内完成。

神器 1:Turbo Console Log

让 "手写 console.log" 像呼吸一样自然!

  • 一键生成
    选中变量 → Ctrl+Alt+L(Win)/ Option+Control+L(Mac)。
    立刻出现带文件名、行号、函数名的日志:
arduino 复制代码
console.log('🚀 file:api.ts ~ line:42 ~ token', token);
  • 批量管理
    • 注释:Alt+Shift+C / Option+Shift+C
    • 取消注释:Alt+Shift+U / Option+Shift+U
    • 一键删除:Alt+Shift+D / Option+Shift+D
      只作用于插件生成的日志,不会误删手写代码。
  • 高度可定制
    在 settings.json 里改前缀、引号、分号、日志类型(log/warn/error/table),支持 20+ 语言。

神器 2:Console Ninja

把 DevTools 搬进编辑器!

  • Inline 实时日志
    启动 npm run dev 或 vite,所有 console.log 的值实时贴在代码行尾,悬停可展开对象。
  • 运行时错误
    报错堆栈直接贴在源码位置,点击即可跳转。
  • 网络日志
    请求/响应状态码、耗时、响应体,一行不漏。
  • 零配置
    Vite、Webpack、Next.js、Nuxt、Nest.js 等开箱即用。

组合拳:写、看、删,一条龙的 5 秒工作流

步骤 Turbo Console Log Console Ninja
1. 插入日志 Ctrl+Alt+L 生成 ---
2. 实时查看 --- 行尾直接显示
3. 一键清场 见下文 见下文

一键清场,零残留

写完调试最怕 "忘了删" 。两个插件都给你安排得明明白白:

  • Turbo Console Log

    当前文件想一键删除所有它生成的 console.log:

    • Windows / Linux:Alt + Shift + D
    • macOS:Option + Shift + D
      只删插件日志,不影响手写代码。
  • Console Ninja
    它不在源码里插日志,但运行时会有"隐形"输出。
  • 想彻底无痕:
    • 命令面板(Ctrl + Shift + P / Cmd + Shift + P)→ 输入并执行
      Console Ninja: Pause
      重新调试时再执行 Console Ninja: Resume 即可恢复。
  • 连手写日志也要一扫光?
    打开全局搜索(Ctrl + Shift + H),勾选正则,查找
lua 复制代码
  console.(log|warn|error|info|debug)([^)]*);?\s*

替换留空 → 全部替换,项目瞬间干净。

安装与下一步

  • 打开 VSCode → Extensions(扩展)。
  • 搜索并安装:
    • Turbo Console Log
    • Console Ninja
  • 重启 VSCode,立刻体验**「5 秒一条龙」**调试流程。

从此,调试不再是"写log → 切窗口 → 找行号 → 再删 log"的体力活

而是"选中 → 快捷键 → 内嵌结果 → 一键清场"的丝滑体验。

Console.log 重度使用者,祝你快乐!

相关推荐
樱花落木兰5 小时前
分布式登录实战:Session 会话共享改造,Redis 存储用户登录状态
java·javascript·数据库·redis·分布式·缓存
Helix2505 小时前
Chrome 开发者工具进阶:长截图、网络调试与性能分析
前端·chrome·chrome devtools·使用技巧·性能分析·开发者工具·长截图
liangshanbo12156 小时前
面试题:线上 JavaScript 报错如何快速定位到源码?
开发语言·javascript·ecmascript
liangshanbo12156 小时前
面试题:Webpack 的 publicPath 有什么作用?
前端·webpack·node.js
mjhcsp6 小时前
DeepSeek V4.1 Flash 批量处理效能实测
java·前端·数据库
CHEEVEN_QY7 小时前
新能源汽车电池托盘FSW量产的工艺稳定性控制
java·前端·汽车
Alice-YUE7 小时前
前端 × AI:从 Cursor 到 Transformer,一份完整认知路径
前端·人工智能·transformer·ai编程·前端开发·cursor
Code_Solitude7 小时前
C语言:关于二维数组的作业总结
java·c语言·前端
专业程序开发源8 小时前
django新闻推荐系统70655-计算机课程设计、毕业设计
java·javascript·spring boot·后端·python·django·课程设计
acd120098 小时前
前端随笔:数据明明变了,Vue 页面就是不更新
前端·javascript·vue.js