javascript - 在 Safari 中加载源映射和调试？

Question

我们遇到了一个只发生在 Safari 浏览器上的错误，所以我清理了我 Macbook 上的 OSX 分区并尝试对其进行调试，但我找不到如何查看原始源代码和设置断点的方法。

我的主文件是 main.d7f60b0631c7822cabf3.bundle.js 文件的最后一行是这个，它指向确实存在的 sourcemap 文件，因为我可以输入 url 并获取它, 它适用于 firefox 和 chrome:

//# sourceMappingURL=main.d7f60b0631c7822cabf3.bundle.js.map

在 Firefox 中，我可以转到开发工具中的调试器选项卡，在源代码下我可以看到我的原始源文件 webpack:///src/app/app.component.ts 我可以打开它并设置断点。

在 Chrome 开发工具中，我转到“源”选项卡并执行相同的操作，将树导航到 webpack:// - . - src - app - app.component.ts.

有没有办法在 Safari 中实现同样的功能？从内存中，因为我在 Windows 上写这个，我在调试选项卡中看不到任何文件，只有一个断点列表。在资源选项卡中，我可以看到包和一个箭头，看起来我应该能够展开它, 但单击该箭头确实将其从右向下旋转，就像它已展开但未显示任何内容。其他文件(如 jquery)在展开时似乎确实在它们下面有原始源...

Answer 1

我有同样的问题，并在此处的另一个帖子中找到了答案:

• How do I toggle source mapping in Safari 7?

(简短版本，在调试器中，按住命令单击您想查看的任何符号，它应该会跳转到原始源代码。作为引用，我正在使用编译为 JavaScript 的 TypeScript)

作者指向这个文档:

• https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW4

在这个过程中，我还注意到在 Safari 调试器的 Resources 选项卡中，它显示 foo.js 旁边有一个 turner，它展开以显示原始 foo .ts 文件(我假设有一个更复杂的来源，如果它们连接在一起，它可能会扩展以显示多个来源？)

个人意见:我认为 turner 是解决这个问题的好方法……奇怪的是，调试器默认显示“已编译”/“转译”的源代码，而不是逻辑上想要调试的内容。