【JS】log输出打印日志所在代码行数

最新推荐文章于 2025-02-24 04:20:35 发布

一月的晨星

最新推荐文章于 2025-02-24 04:20:35 发布

阅读量2.8k

点赞数 4

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weixin_45293715/article/details/125898482

版权

这篇博客介绍了如何通过JavaScript实现一个替代系统log函数的功能，该函数在输出日志时能显示代码的行数。作者提供了可运行的代码示例，包括一个getStackTrace函数来获取堆栈信息，以及一个log函数用于打印带有行号的日志。示例中展示了如何在调用log函数及其内部函数时，正确显示日志输出的行号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

其实有人发过：【JS】console.log输出打印日志所在代码行数_Tikeee的博客-优快云博客

但是这个代码看上去有点莫名其妙，直接复制过来也没法运行，所以我自己研究了一下，重新写了代码。

//说明：替代系统本身的log函数，可以附带log命令所在行数信息
function getStackTrace() {
    var obj = {};
    Error.captureStackTrace(obj, getStackTrace);
    return obj.stack;   
};
function log(data) {	
    var stack = getStackTrace() 
    //console.log(stack)    //有兴趣可以用这行命令查看下完整显示的信息
    stack = stack.match(/js:\d+/gm)[1]  //stack中的第二行是正确信息
    stack = stack.slice(stack.indexOf("js:")+3,stack.length) 
    console.log("<" + "第" + stack + "行> " + data)
}

//一下为函数演示部分
log("输出1")
fun1()


function fun1(){
    fun2()
}
function fun2(){
    log("输出2")
}

运行结果展示：