我正在使用 TypeScript 调试工具,遇到了我似乎无法以编程方式访问 TypeScript 调用堆栈的问题。
当我这样做时:
const error = new Error();
console.log(error.stack);
我得到了预期的结果,并且可以看到 TypeScript 调用堆栈。
但是如果我这样做:
const error = new Error();
const errorStack = error.stack;
console.log(errorStack);
我只获得了 JavaScript 堆栈,而不是预期的 TypeScript 堆栈。
问题在于如何或何时应用源映射。
有没有办法将我在第一个示例中作为控制台输出获得的信息获取到 TypeScript/JavaScript 变量中?非常感谢任何帮助!
最佳答案
这里有一些信息可以重现这个问题!
首先创建一个包含以下内容的文件“logger.ts”:
class DebugLogging {
public log(msg: string) {
const error = new Error();
console.log(error.stack);
const errorStack = error.stack;
console.log(errorStack);
const realStringStack = "-> " + error.stack;
console.log(realStringStack);
debugger
console.log(msg);
}
}
const logger = new DebugLogging();
logger.log("test");
然后使用以下命令编译 TypeScript 文件:
tsc --source-map logger.ts
现在,使用以下内容创建文件“logger.html”:
<html>
<head>
<script src="logger.js"></script>
</head>
<body>
<p>look at the console output...</p>
<body>
</html>
在 Chrome 浏览器(我使用的是 V80.0.3987.163)中打开 HTML 文件并查看 JavaScript 控制台,它应该已经停止了“调试器”语句。
前两个 console.log 语句的输出均按预期显示相同的 TypeScript 调用堆栈。但是第三个 console.log 的输出显示的是 JavaScript 调用堆栈。
一旦调用栈转换成字符串,映射信息就丢失了。
您现在可以在控制台中进行实验,这样可以获得预期的结果:
> error // display the contents of the Error object
< Error
at DebugLogging.log (logger.ts:3)
at logger.ts:16
现在奇怪的是:通过在控制台中键入此内容,您将获得 JavaScript 调用堆栈而不是 TypeScript 调用堆栈作为字符串:
> error.stack // display the contents of the Error object's stack property
< "Error
at DebugLogging.log (file:///home/me/exer/tss/logger.js:5:21)
at file:///home/me/exer/tss/logger.js:15:8"
> error.stack.split(/at /) // display the contents of the Error object's stack property split into parts
< (3) ["Error↵ ", "DebugLogging.log
(file:///Users/shunyam/exer/tss/logger.js:5:21)↵ ",
"file:///Users/shunyam/exer/tss/logger.js:17:8"]
现在,回到我最初的问题。如何将 TypeScript 调用堆栈的内容放入变量中以实际操作它?
感谢您的宝贵时间!
关于typescript - 以编程方式访问 TypeScript 调用堆栈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61026160/