日志类封装，如何正确的获取到代码日志所在的文件、函数、行号

Creator 2.x
#1

大佬们，想自定义封装个日志类。这个怎么解决呢？希望在浏览器和native环境下都能友好的支持

#2

供参考

自定义日志方法() {
   // 自定义控制条件
  console.log/error/warn.bind(console, 自定义打印信息);
}
#3

new Error().stack 可以获取堆栈

#4

这样无法拿到调用的函数，

#5

你试了吗？

#6

试了啊，有调用栈信息，但是没有文件名。也没有准确行号

#7 
public static log() {
	return window.console.log.bind(window.console);
}

这样试试呢？
我自己是这么用的，用来加一些样式：

static get info() {
    return window.console.log.bind(
               window.console,
               this.getPrefix(),
               EDITOR ? this.EDITOR_TIME_STYLE : this.TIME_STYLE,
               EDITOR ? this.EDITOR_BADGE_STYLE : this.BADGE_STYLE,
               EDITOR ? this.EDITOR_STYLES.info : this.STYLES.info
      );
}

image

#8

在编辑器环境下无法正确的获得文件名称和代码行号的

#9

这个BootLoader.ts:132 实际上是console原始的自带的。不属于自己的日志的。相当于浏览器自动解析sourcemap获取的信息。在native环境肯定无效的。

#10

嘶，我这边没做Native的，这个倒是在浏览器运行的挺好

#11

只考虑浏览器的话直接console.log就行的。

#12

主要是我想美化一下哈哈哈，就这样做了

#13

通过new Error只能拿到如下格式的调用栈：
at Log.getCallerInfo (eval at (quick_compile.js:238:32), :31:25)
at get info (eval at (quick_compile.js:238:32), :195:33)
at Game.Init (eval at (quick_compile.js:238:32), :22:23)
at App.start (eval at (quick_compile.js:238:32), :48:24)
at eval (eval at createInvokeImpl (component-scheduler.js:219:57), :3:65)
at CCClass._invoke (component-scheduler.js:224:13)
at CCClass.invoke (component-scheduler.js:140:14)
at CCClass.startPhase (component-scheduler.js:480:27)
at 102.cc.Director.mainLoop (CCDirector.js:886:37)
at callback (CCGame.js:645:26)

这个里面缺了文件名称和代码行号，大佬们有解决办法么？

#14

运行时获取文件名称和行号比较难，因为这个信息在代码里面没有。
编译打包后的代码，要从堆栈信息里面，获取输出文件名称和行号，只能通过解析对应的sourcemap来获取，另外像你刚贴的这种编辑器快速编译的，sourcemap都可能没有。
每次查询sourcemap，一般不可能用这个，因为效率过低。

不过硬要做，是能做的，可以模拟cpp的预定义宏的做法，就你在编译ts之前插入一个宏替换步骤：
对要编译的每个ts文件：
1.把Logger.log( 按字符串替换为Logger.log(__FILE__ , __LINE__
2.将 __FILE__ , __LINE__ 替换为对应的文件名和行数。
（其实一步就可以替换完，我这里只是为了方便说明，加了__FILE__ , __LINE__，然后 __FILE__ 也可以一个文件只定义一个const来优化代码大小）
然后用处理后的ts来编译js。就可以输出对应文件名和行号了。

不过我也不清楚编辑器实时运行里面，怎么插入这个前置步骤。打包的时候是可以的，写脚本处理全项目，编译完再替换回来就可以。

#15

sourcemap中应该有这个行号，文件名信息。因为浏览器可以正确拿到的
image