在Safari中加载源图和调试？

Question

我们遇到了一个只出现在Safari浏览器上的错误，所以我在我的Macbook上扫除了我的OSX分区并试图调试它，但我无法找到如何查看原始源代码并设置一个断点。

我的主文件是main.d7f60b0631c7822cabf3.bundle.js，文件的最后一行是这个，它指向存在的源图文件，因为我可以输入网址并获取它，并且它可以在firefox和chrome中使用：

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

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

在Chrome开发工具中，我转到了“来源＆＃39;选项卡并执行相同的操作，将树导航到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调试器的“资源”选项卡中，它显示foo.js旁边有一个转向器，它会展开以显示原始foo.ts文件（和我假设有一个更复杂的来源，它可能会扩展为显示多个来源，如果它们连接在一起？）

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

Answer 2

首先要耐心等待浏览器处理所有源地图。

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

屏幕截图：