利用源映射的堆栈跟踪

Question

概述:
浏览器控制台中的堆栈跟踪输出与调用Error.stack时返回的跟踪不同.控制台堆栈跟踪似乎考虑了源映射,而Error.stack堆栈跟踪则没有考虑.

控制台输出
这是输出到控制台的默认堆栈跟踪.

Uncaught TypeError: Cannot set property 'y' of undefined source.js:4
    (anonymous function) source.js:4
    (anonymous function) source.js:4
    (anonymous function) (index):17

Error.stack Output
这是来自Error.stack的堆栈跟踪:

TypeError: Cannot set property 'y' of undefined
    at <anonymous>:1:37
    at <anonymous>:1:60
    at http://localhost:63342/source-map-example/example2/:17:23 (index):12

源代码:
这是我用于此实验的代码:

<script>
    window.onerror = function() {
        console.log(arguments[4].stack);
    }

    var script = document.createElement('script');
    script.textContent = '(function(){var person={};person.x.y="Throws an error..."})();//# sourceMappingURL=source.min.map';
    document.body.appendChild(script);
</script>

问题:
是否可以以编程方式获取堆栈跟踪,其中包含基于关联源映射的文件和行的引用？

编辑:console.trace和new Error().stack

注意:我没有对这些示例使用window.onerror,而是将try包含在嵌入式JS中,并尝试在catch中使用这些方法.原因是因为在window.onerror中使用堆栈跟踪时没有为嵌入式JS提供任何跟踪.

console.trace()工作得最好,但当然无法捕获输出.即使如此,这仍然没有按预期工作.输出包含一个指向console.trace()行的堆栈跟踪,以及其他几个.

console.trace() source.js:9
    (anonymous function) source.js:9
    (anonymous function) source.js:9
    (anonymous function)

new Error().stack也不能按预期工作.它确实包含堆栈跟踪,但它不使用源映射.

Error
    at <anonymous>:1:85
    at <anonymous>:1:105
    at http://localhost:63342/source-map-example/example2/:18:23 source.js:18

Answer 1

不幸的是，这是浏览器特定的功能，目前 Firefox 或 Chrome 都不支持（而且我不熟悉其他浏览器对它的支持）。

在 Chrome 中，您可以关注当前正在实施的功能请求：https://code.google.com/p/chromium/issues/detail ?id=357958

根据您的用例，并且如果您有一些捕获源映射本身的方法，Mozilla 有一个出色的源映射工具，可以让您在https://github.com/mozilla/source-map/上映射源/堆栈跟踪。