V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
lyc575757
V2EX  ›  分享创造

增强前端开发者在使用 console 时的开发者体验 [unplugin-turbo-console]

  •  
  •   lyc575757 · 115 天前 · 1707 次点击
    这是一个创建于 115 天前的主题,其中的信息可能已经有所发展或是发生改变。

    utc

    中文文档

    GitHub

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

    它的主要功能有:

    高亮输出

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

    自定义前缀和后缀

    编辑器跳转

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

    传递日志

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

    服务端 -> 客户端

    客户端 -> 服务端


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

    欢迎大家使用并反馈😀

    17 条回复    2024-07-19 17:17:22 +08:00
    johnnyNg
        1
    johnnyNg  
       115 天前
    这个不错,一直需要,没找到好用的,但是希望轻量一点
    enchilada2020
        2
    enchilada2020  
       115 天前 via Android   ❤️ 1
    我就说眼熟 点开 repo 一看 stat 过了
    lyc575757
        3
    lyc575757  
    OP
       115 天前
    @johnnyNg 如果只需要高亮输出和自定义前后缀应该还是挺轻量的,用到其他几个功能插件会另外启动一个 nodejs 服务
    gouLang
        4
    gouLang  
       115 天前
    启用高亮输出报错了, 上网也没找到解决方案, 看起来像是 babel-loader 的问题, 但是不确定是不是, 是兼容性问题吗

    依赖信息如下

    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",

    node 版本 16.16.0

    报错信息如下
    ERROR in ./src/util/local.js
    Module build failed (from ./node_modules/babel-loader/lib/index.js):
    SyntaxError: D:\low-code\src\util\local.js: Bad character escape sequence. (36:39)

    34 | cookie.erase(key)
    35 | } else {
    > 36 | console.error("%c🚀 \low-code\src\util\local.js·36%c🔦 http://localhost:3070#0dj7,36,5","padding:2px 5px; border-radius:3px 0 0 3px;margin-bottom:5px;color: #111827; background: #F7DF1E","background: #00DC8250;padding:2px 5px;border-radius:0 3px 3px 0;margin-bottom:5px","\n",'key is need', 'clearCookieByKey')
    | ^
    37 | }
    38 | }
    iMusic
        5
    iMusic  
       115 天前
    还能跳编辑器,牛逼啊。样式丑了点
    lyc575757
        6
    lyc575757  
    OP
       115 天前
    @gouLang 报错所在行的源代码能提供一下吗 我看看能不能复现
    gouLang
        7
    gouLang  
       115 天前
    @lyc575757 #6 就是非常普通的一个 console.log('test') 没有什么额外的东西了
    gouLang
        8
    gouLang  
       115 天前
    @lyc575757 #6 我找到原因了, 如果 console.log 所在的文件名是 u 开头的 在输出的时候就会被 babel 强行转义了, 然后报错, 比如我在 userequest.js 里使用 console, 文件路径就是\userequest.js, 然后就报错了....有办法优化吗老哥
    gouLang
        9
    gouLang  
       115 天前
    @lyc575757 #6 最新发现,我把这些 u 开头的文件注释掉以后, 打印也有问题, 会把路径转义掉, 显示的组件命会不正确, 例如我的路径是\numberInput.vue, 最后在 console.log 里显示就成了 \n 和 umberInput, 被换行了
    lyc575757
        10
    lyc575757  
    OP
       115 天前
    @gouLang #9 可以加个 v 交流更快一点 bHljNTc1NzU3NTc=
    chensuiyi
        11
    chensuiyi  
       115 天前
    很不错的功能。
    RoyRao
        12
    RoyRao  
       114 天前
    很 nice ,不知道能不能支持 RN
    lyc575757
        13
    lyc575757  
    OP
       114 天前
    @RoyRao 稍微了解了一下,RN 的打包工具是一个叫 Expo 的,应该没办法用这个插件。如果 RN 能够用 Webpack 开发应该是可以支持的。
    com781517552
        14
    com781517552  
       113 天前
    能做个 VSCODE 插件 console.log("🚀 ~ toggleSelection ~ filterType:", filterType) 类似这种就好了
    duowb
        15
    duowb  
       113 天前
    com781517552
        16
    com781517552  
       113 天前
    @duowb 我用的就是这个 OP 的样式更好点 这个还不知道咋自定义样式
    com781517552
        17
    com781517552  
       113 天前
    @duowb 刚看到 有自定义样式
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1009 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 22:50 · PVG 06:50 · LAX 14:50 · JFK 17:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.