如何设置 Firefox Dev Tools 以遵守控制台中的源地图?
How do I set Firefox Dev Tools to respect source maps in the console?
我在 Mac 上使用 Firefox v47。我已经弄清楚如何让调试器使用 JavaScript 源映射来显示我触发某些代码的位置,但它使用控制台中的编译文件。我如何让它显示未编译的文件行?
这在 Chrome 中开箱即用,所以在 Firefox 中似乎是一个奇怪的遗漏,所以我假设我做错了什么。
在Firefox Toolbox Settings, enable the option Show original sources
in the Style Editor area. This option should, however, be enabled by default in all Firefox versions >= 35 (source)
有一个单独的 article about source map support in Firefox 详细说明了 sourcemaps 工作所需的最低 Firefox 版本 (Firefox 29)。
此外,请记住并非所有 SASS 生成的文件都带有源映射 - 如果您从命令行,通过在 ruby 程序中使用 render_with_sourcemap
呈现它,或者如果您使用的是 gulp 或 grunt.
等任务管理器,则通过其他方式呈现
您可以通过查看生成的 css 文件的最后一个非空行来检查您的样式表是否具有关联的源映射 - 它应该看起来有点像这样:
/*# sourceMappingURL=style.css.map */
截至目前,这项工作仍在进行中,请参阅 the related note on MDN and a bug ticket describing the problem that brought me to this question。所以,就目前而言,source map 似乎在任何地方都运行良好 除了控制台 。
我在 Mac 上使用 Firefox v47。我已经弄清楚如何让调试器使用 JavaScript 源映射来显示我触发某些代码的位置,但它使用控制台中的编译文件。我如何让它显示未编译的文件行?
这在 Chrome 中开箱即用,所以在 Firefox 中似乎是一个奇怪的遗漏,所以我假设我做错了什么。
在Firefox Toolbox Settings, enable the option Show original sources
in the Style Editor area. This option should, however, be enabled by default in all Firefox versions >= 35 (source)
有一个单独的 article about source map support in Firefox 详细说明了 sourcemaps 工作所需的最低 Firefox 版本 (Firefox 29)。
此外,请记住并非所有 SASS 生成的文件都带有源映射 - 如果您从命令行,通过在 ruby 程序中使用 render_with_sourcemap
呈现它,或者如果您使用的是 gulp 或 grunt.
等任务管理器,则通过其他方式呈现
您可以通过查看生成的 css 文件的最后一个非空行来检查您的样式表是否具有关联的源映射 - 它应该看起来有点像这样:
/*# sourceMappingURL=style.css.map */
截至目前,这项工作仍在进行中,请参阅 the related note on MDN and a bug ticket describing the problem that brought me to this question。所以,就目前而言,source map 似乎在任何地方都运行良好 除了控制台 。