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

[前端] 写了一个打印时附带文件路径,行数,和所在函数的 console,可对打印信息自动分组,来试试呗😄

  •  
  •   jiweixia66 · 2018-07-31 13:05:01 +08:00 · 2182 次点击
    这是一个创建于 2294 天前的主题,其中的信息可能已经有所发展或是发生改变。

    github: https://github.com/mini-peanut/console-with-explain

    效果图:image

    目前支持,自定义打印路径深度,对打印信息安装路径进行分组,打印前清除之前的打印信息等

    7 条回复    2018-07-31 15:42:35 +08:00
    Clarencep
        1
    Clarencep  
       2018-07-31 14:10:10 +08:00
    话说为啥不用 console.trace/console.warn...
    wxsm
        2
    wxsm  
       2018-07-31 14:15:24 +08:00
    console.log 打印行右边有源码地址,行列数,直接点击可查看源码。
    jiweixia66
        3
    jiweixia66  
    OP
       2018-07-31 14:21:50 +08:00
    @Clarencep console.trace 和 console.warn 都是不支持打印路径深度的,而且太多无用的 trace 没法被隐藏掉,在控制台显示是没有 console.log 直观的,我想这也是我们喜欢用 console.log 的原因,同时 console.log 和 console.warn 没有分组的功能
    jiweixia66
        4
    jiweixia66  
    OP
       2018-07-31 14:23:55 +08:00
    @wxsm 对的,有 sourcemap 的话可以这样,但是不够直观,需要点到源码里面去,如果我在多个地方打印同一个变量,想分析中间的变化,sourceMap 会比较考验人的记忆能力
    jiweixia66
        5
    jiweixia66  
    OP
       2018-07-31 14:28:41 +08:00
    @wxsm 同时右边只有一个文件名,实际开发中如果每个组件都有同名文件的话,比如 index.js, 每个都需要点进去才可以看到
    wxsm
        6
    wxsm  
       2018-07-31 14:47:58 +08:00
    1. 分析中间的变化(即过程),你需要断点。
    2. 实际开发中没有这么多 console log,如果有,那就是不应该。
    jiweixia66
        7
    jiweixia66  
    OP
       2018-07-31 15:42:35 +08:00
    @wxsm 好吧,thank u
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2621 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 05:24 · PVG 13:24 · LAX 21:24 · JFK 00:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.