如何设置Firefox开发工具以尊重控制台中的源地图? [英] How do I set Firefox Dev Tools to respect source maps in the console?

问题描述

我在Mac上使用Firefox v47.我已经研究出如何使调试器使用JavaScript源映射来显示我在哪里触发一些代码，但是它使用控制台中的已编译文件.如何获得显示未编译文件行的信息?

I'm using Firefox v47 on a Mac. I've worked out how to get the Debugger to use JavaScript source maps to show where I'm triggering some code, but it uses the compiled file in the Console. How do I get it to show me the uncompiled file lines?

这在Chrome浏览器中是开箱即用的，因此在Firefox中似乎是一个奇怪的遗漏，因此我假设我做错了事.

This works out of the box in Chrome, so seems an odd omission in Firefox so I'm assuming I've done something wrong.

推荐答案

在 Firefox工具箱设置，在样式编辑器"区域中启用选项Show original sources.但是，默认情况下，应在所有Firefox版本> = 35(来源)

In the 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)

有单独的有关Firefox中源地图支持的文章详细说明了要使源地图正常运行所需的最低Firefox版本(Firefox 29).

There is a seperate article about source map support in Firefox that elaborates on the minimum required Firefox version for sourcemaps to work (Firefox 29).

此外，请记住，并非所有SASS生成的文件都随附有源地图-如果您从命令行使用--sourcemap参数，则必须使用--sourcemap参数手动启用该功能，方法是使用render_with_sourcemap在ruby程序中，或者如果您正在使用任务管理器(例如gulp或grunt)，则可以通过其他方式进行.
您可以通过查看生成的CSS文件的最后一个非空行来检查样式表是否具有关联的源贴图-它应该看起来像这样:

Also, keep in mind that not all SASS-generated files come with sourcemaps - this is a feature that must be manually enabled with the --sourcemap argument if you're using it from the command line, by rendering it with render_with_sourcemap from within a ruby program, or by other means if you're using a task manager such as gulp or grunt.
You can check if your stylesheet has an associated sourcemap by looking at the last non-empty line of your generated css file - it should look somewhat like this:

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

这篇关于如何设置Firefox开发工具以尊重控制台中的源地图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！