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

【问题标题】：Loading sourcemaps and debugging in Safari?在 Safari 中加载源映射和调试？
【发布时间】：2017-07-24 05:19:26
【问题描述】：

我们遇到了一个仅在 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 之类的其他文件在展开时似乎确实在它们下面有原始源...

【问题讨论】：

您找到解决方案了吗？
无法进行足够的格式化。请参阅下面的答案。

标签： javascript typescript safari webpack source-maps

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

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

【讨论】：

【解决方案2】：

在浏览器处理所有源映射时，请先耐心等待。

完成后，您应该能够搜索任何原始源文件，方法是在位于窗格底部的输入字段中输入该文件的名称，并使用占位符“过滤器”。这是一个非常违反直觉的 UX IMO。希望这对某人有帮助！

截图：

【讨论】：