简体   繁体   English

在 console.log 中自动化/覆盖/扩展前缀以进行调试

[英]automating / overriding / extending prefix in console.log for debugging

Anyone have a good solution to extending console.log so that it auto prints class name and method as a prefix?任何人都有扩展 console.log 的好解决方案,以便它自动打印 class 名称和方法作为前缀? I'm using web components and use strict is turned on.我正在使用 web 组件并启用严格使用。

someFunction() {
  let varA = "hello"
  console.log(this.constructor.name, "someFunction", {varA})
}

Would like to automate this part: this.constructor.name, "someFunction", ...想自动化这部分:this.constructor.name, "someFunction", ...

arguments.callee.name will print the function name, but no longer works with strict mode turned on. arguments.callee.name 将打印 function 名称,但在开启严格模式时不再有效。 Extending console.log in a centralized location via:通过以下方式在集中位置扩展 console.log:

export var log = function(){
  var args = Array.prototype.slice.call(arguments);
  args.unshift(this.constructor.name + ": ");
  console.log.apply(console, args);
}

does not work as this.constructor.name does not print the correct context and if it's not in a web component, it doesn't work at all.不起作用,因为 this.constructor.name 不打印正确的上下文,如果它不在 web 组件中,它根本不起作用。
Extending console.log in each web component defeats the purpose (or half of it).在每个 web 组件中扩展 console.log 会破坏目的(或一半)。 Could fold a function that extends console.log in the build for each web component but would still have the problem of not being able to call arguments.calleee.可以折叠一个 function,它在构建中为每个 web 组件扩展 console.log,但仍然会遇到无法调用 arguments.calleee 的问题。 Using lit-element, but this is a native javascript issue.使用 lit-element,但这是本机 javascript 问题。

console.trace() may be of use here, instead of a custom console method. console.trace()可能在这里有用,而不是自定义控制台方法。 Or, use the new Error() 's .stack property.或者,使用new Error().stack属性。

 class A { b() { return function c() { return function d() { return (function e() { return new Error().stack; })(); } } } } console.log("here's the stack:\n", new A().b()()());

so based on sean-7777's answer, I suppose we could slice the stack output like this:所以根据 sean-7777 的回答,我想我们可以像这样对堆栈 output 进行切片:

let funcname = new Error().stack.split('\n')[1];
funcname=funcname.slice(funcname.indexOf("at ")+3, funcname.indexOf(" ("));
console.log(debugline, 'debug text');

If you put it into a helper function, you could just grab line index 2 (since index 1 would give you the name of the helper function).如果你把它放到一个 helper function 中,你可以只获取行索引 2(因为索引 1 会给你 helper 函数的名称)。

I was hoping for something a little more straightforward but hacking the output does work.我希望有一些更直接的东西,但破解 output 确实有效。

UPDATE:更新:

export function prtfun() {
  let debugline = new Error().stack.split('\n')[2];
  return debugline.slice(debugline.indexOf("at ")+3, debugline.indexOf(" ("));
}

call it from anywhere like this: console.log(prtfun(), 'log text...');从这样的任何地方调用它:console.log(prtfun(), 'log text...');

and it will print ClassName.FunctionName log text...它将打印 ClassName.FunctionName 日志文本...

Works great.效果很好。 I'd disable this in production though.我会在生产中禁用它。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM