增强前端开发者在使用 console 时的开发者体验

267 阅读1分钟

Frame 51113.png

中文文档 GitHub

console是前端开发者在开发过程中最常用到的 Web API 之一,然而在使用过程中你是否也遇到过这些困扰:

  1. 面对控制台同时输出的多个 console,无法清晰的一眼区分它们来自哪个文件;
  2. 无法快速定位到某一个 console 的源代码所在行;
  3. 全栈开发过程中在服务端输出复杂对象时,无法方便的查看其结构
  4. ...

接下来为大家介绍的插件就是致力于优化与解决这些问题的:

Unplugin Turbo Console 是一个通用型插件,旨在增强前端开发人员在使用 console 时的开发者体验(DX)。它拥有许多实用的功能与灵活的可配置项,得益于 Unplugin ,它几乎适用于所有现代前端框架。

它的主要功能有:

高亮输出

基于文件类型(如.js(x).ts(x).vue.svelte.astro)高亮 Console 输出。并带有文件名,行号,变量名等信息。

image.png

自定义前缀和后缀

image.png

编辑器跳转

通过点击日志输出中的链接,可以自动打开代码编辑器并跳转到 console 源代码所在行:

launch-editor.gif

传递日志

此功能可以让你在服务端和客户端之间传递日志内容:

服务端 -> 客户端

客户端 -> 服务端

client-server.gif


有关插件的详细使用教程以及配置项可以点击文档查看

欢迎大家使用并反馈😀