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

[jiweixia66]

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

效果图：

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

[Clarencep]

话说为啥不用 console.trace/console.warn...

[wxsm]

console.log 打印行右边有源码地址，行列数，直接点击可查看源码。

[jiweixia66]

@Clarencep console.trace 和 console.warn 都是不支持打印路径深度的，而且太多无用的 trace 没法被隐藏掉，在控制台显示是没有 console.log 直观的，我想这也是我们喜欢用 console.log 的原因，同时 console.log 和 console.warn 没有分组的功能

[jiweixia66]

@wxsm 对的，有 sourcemap 的话可以这样，但是不够直观，需要点到源码里面去，如果我在多个地方打印同一个变量，想分析中间的变化，sourceMap 会比较考验人的记忆能力

[jiweixia66]

@wxsm 同时右边只有一个文件名，实际开发中如果每个组件都有同名文件的话，比如 index.js, 每个都需要点进去才可以看到

[wxsm]

1. 分析中间的变化（即过程），你需要断点。
2. 实际开发中没有这么多 console log，如果有，那就是不应该。

[jiweixia66]

@wxsm 好吧，thank u