提升开发效率,VSCode 中的两大神器

提升开发效率:VSCode 中的两大神器

在 JavaScript / TypeScript 开发中,console.log 是我们最常用的调试工具之一。但频繁地在代码中手动插入 console.log,然后切换到浏览器的 DevTools 查看输出,不仅效率低下,还容易让人感到疲惫。幸运的是,VSCode 提供了两个强大的插件,可以彻底改变这种状况,让你的调试工作变得轻松又高效。

Turbo Console Log:让日志生成变得轻松

Turbo Console Log 是一个非常实用的插件,它可以帮助你快速生成带有文件名、行号和函数名的 console.log,并且支持多种快捷操作。

快速生成日志

选中变量后,按下快捷键(Windows:Ctrl+Alt+L,Mac:Option+Control+L),插件会自动生成类似以下的日志:

arduino 复制代码
console.log('🚀 file:api.ts ~ line:42 ~ token', token);

这样的日志不仅清晰,还能帮助你快速定位问题。

批量管理日志

Turbo Console Log 提供了批量管理日志的功能,你可以通过快捷键快速注释、取消注释或删除日志:

  • • 注释:Alt+Shift+C / Option+Shift+C
  • • 取消注释:Alt+Shift+U / Option+Shift+U
  • • 删除:Alt+Shift+D / Option+Shift+D

这些操作只针对插件生成的日志,不会误删你手动编写的代码。

高度可定制

你还可以在 settings.json 中自定义日志的前缀、引号、分号以及日志类型(如 logwarnerror 等),支持 20 多种语言。

Console Ninja:将 DevTools 搬进编辑器

Console Ninja 是另一个强大的插件,它可以直接在 VSCode 编辑器中显示 console.log 的输出,让你无需切换到浏览器就能查看日志。

实时日志

当你启动项目(如 npm run devvite)时,Console Ninja 会将 console.log 的输出直接显示在代码行尾。例如:

arduino 复制代码
console.log('user', user); // 输出结果会直接显示在这一行

如果你将鼠标悬停在输出上,还可以展开对象,查看详细内容。

运行时错误

Console Ninja 还会将错误堆栈直接贴在源码位置,点击即可跳转到相关代码,方便你快速定位问题。

网络日志

对于网络请求,Console Ninja 会显示请求状态码、耗时和响应体,让你对网络请求的细节一目了然。

零配置

Console Ninja 支持多种开发框架,如 Vite、Webpack、Next.js、Nuxt 和 Nest.js 等,无需额外配置即可使用。

组合使用,高效调试

将 Turbo Console Log 和 Console Ninja 结合使用,可以形成一个完整的调试工作流:

    1. 插入日志:使用 Turbo Console Log 的快捷键快速生成日志。
    1. 实时查看:Console Ninja 会在代码行尾直接显示日志输出。
    1. 一键清场:调试完成后,使用 Turbo Console Log 的快捷键删除所有生成的日志,或者通过 Console Ninja 的命令面板暂停输出。

一键清场,零残留

调试完成后,最怕的就是忘记删除 console.log。Turbo Console Log 提供了快捷键(Windows / Linux:Alt + Shift + D,macOS:Option + Shift + D)来删除当前文件中所有由插件生成的日志,而不会影响你手动编写的代码。

如果你希望彻底清除所有日志,包括手写的 console.log,可以通过全局搜索(Ctrl + Shift + H / Cmd + Shift + H),勾选正则表达式,查找并替换以下内容:

lua 复制代码
console.(log|warn|error|info|debug)([^)]*);?\s*

将所有匹配的日志替换为空,即可清理整个项目。

安装方法

打开 VSCode-->点击左侧的扩展图标-->搜索并安装以下插件

  • • Turbo Console Log
  • • Console Ninja

总结:

通过 Turbo Console Log 和 Console Ninja,你可以快速生成日志、实时查看输出,并在调试完成后一键清除日志,极大地提升了开发效率。

相关推荐
昔人'3 小时前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html
岁月宁静8 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者9 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~9 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge9 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再9 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴10 小时前
Lua 模块的完整入门指南
前端·lua
浪里行舟10 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@12311 小时前
CSS易忘属性
前端·css
瓜瓜怪兽亚11 小时前
前端基础知识---Ajax
前端·javascript·ajax