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

Question

我们遇到了仅在 Safari 浏览器上发生的错误，所以我清理了 Macbook 上的 OSX 分区并尝试调试它，但我无法找到如何查看原始源代码并设置断点。

我的主文件是main.d7f60b0631c7822cabf3.bundle.js，文件的最后一行是这个，它指向确实存在的源映射文件，因为我可以输入 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

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

• 如何在 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 调试器的“资源”选项卡中，它显示了foo.js旁边有一个特纳，它会展开以显示原始foo.ts文件（我假设使用更复杂的源，它可能会展开以显示多个如果它们连接在一起的话来源？）

个人意见：我认为特纳是解决这个问题的一个很好的解决方案......奇怪的是调试器默认显示“编译”/“转换”源而不是逻辑上想要调试的东西。