如何设置Firefox Dev Tools以在控制台中遵守源映射?

时间:2016-06-10 14:24:35

标签: javascript firefox source-maps firefox-developer-tools

我在Mac上使用Firefox v47。我已经研究了如何让调试器使用JavaScript源映射来显示我触发某些代码的位置,但它使用了控制台中的编译文件。如何让它向我显示未编译的文件行?

这在Chrome中开箱即用,所以在Firefox中似乎有点遗漏,所以我假设我做错了。

2 个答案:

答案 0 :(得分:1)

Firefox Toolbox Settings中,在样式编辑器区域中启用选项Show original sources。但是,默认情况下,应在所有Firefox版本中启用此选项> = 35(source

有一个单独的article about source map support in Firefox详细说明了源代码工作所需的最低Firefox版本(Firefox 29)。

另外,请记住,并非所有SASS生成的文件都附带源映射 - 如果您从命令行使用它,必须使用--sourcemap参数手动启用此功能,通过渲染它在ruby程序中使用render_with_sourcemap,或者如果您使用gulp或grunt等任务管理器,则使用其他方式。
您可以通过查看生成的css文件的最后一个非空行来检查样式表是否具有关联的源映射 - 它应该看起来像这样:

/*# sourceMappingURL=style.css.map */

答案 1 :(得分:1)

截至目前,这仍在进行中,请参阅the related note on MDNa bug ticket describing the problem that brought me to this question。因此,就目前而言,除了控制台之外,源代码地图似乎无处不在