在 Firefox 开发者工具中实时编辑 Sass 和 Less

Sass 和 Less 是能够编译成 CSS 的表达性语言。如果您正在使用 Sass 或 Less 来生成 CSS，您可能希望调试您编写的源代码而不是生成的 CSS。幸运的是，您现在可以使用源映射在 Firefox 29 开发者工具中做到这一点。

Firefox 开发者工具使用源映射来显示原始源代码中规则的行号，并允许您在样式编辑器中编辑原始源代码。以下是使用此功能的方法

1. 生成源映射

在将源代码编译成 CSS 时，使用每个样式表的选项来生成源映射。为此，您需要 Sass 3.3+ 或 Less 1.5+。

Sass

sass index.scss:index.css --sourcemap

Less

lessc index.less index.css --source-map

这将为每个 CSS 文件创建一个 .css.map 源映射文件，并在您的 CSS 文件末尾添加一个注释，其中包含源映射的位置：/*# sourceMappingURL=index.css.map */。开发者工具将使用此源映射将 CSS 样式表中的位置映射到原始源代码中的位置。

2. 在开发者工具中启用源映射

右键单击检查器规则视图或样式编辑器中的任何位置以获取上下文菜单。选中 显示原始源代码 选项

现在 CSS 规则链接将显示原始文件中的位置，单击这些链接将带您到样式编辑器中的源代码

3. 设置文件监控

您可以在样式编辑器工具中编辑原始源文件，但要看到更改应用于页面，您需要监控预处理源代码的更改，并在每次更改时重新生成 CSS 文件。要设置监控

Sass

sass index.scss:index.css --sourcemap --watch

Less

对于 Less，您需要设置另一个服务来执行监控，例如 grunt。

4. 保存原始源代码

通过点击 保存 链接或 Cmd/Ctrl-S 将原始源代码保存到本地文件系统

开发者工具将推断本地生成的 CSS 文件的位置并监控该文件以进行更改，以便更新页面上的实时样式表。

现在，当您编辑原始源代码并保存它时，页面的样式将更新，您将立即获得 Sass 或 Less 更改的反馈。

源代码必须保存到磁盘，并且必须设置文件监控，以便样式更改生效.

Mozilla 的 Firefox 开发者工具开发者，主要负责样式工具。

@harthvader

Heather Arthur 的更多文章...

Mozilla Hacks 的技术布道者和编辑。关于 HTML5、JavaScript 和开放网络进行演讲和博客创作。Robert 是 HTML5 和开放网络的坚定支持者，自 1999 年以来一直从事网络前端开发工作 - 在瑞典和纽约市。他还定期在 http://robertnyman.com 上撰写博客，并且喜欢旅行和结识新朋友。

Robert Nyman [荣誉编辑] 的更多文章...

32 条评论

Mihai Chereji

不错！FF Dev 工具确实开始让更成熟的解决方案相形见绌。

2014 年 2 月 18 日下午 10:18
Jonas K

很棒的消息。事实上，我今天就在思考源映射和 Firefox。
谢谢。

2014 年 2 月 18 日下午 11:45
Hai

关于主题的一些反馈。
DEV 工具感觉非常沉重，因为所有小部件由于填充而占用大量空间。是否有计划提供一个主题，让页面内容有更多空间，尤其是在较小的屏幕上？

顺便说一下，DEV 工具取得了很大进展，不幸的是，每个人都在抱怨 Firebug，因为大多数开发者不知道 Mozilla 在内部 DEV 工具方面取得的进展。

2014 年 2 月 18 日下午 12:04
1. Brian Grinstead
  
  您好，我们正在努力让主题在这里进行填充控制：https://bugzilla.mozilla.org/show_bug.cgi?id=915414。29 版本的整体填充已经缩小了不少，只剩下几件事需要完成，然后我们就可以缩小辅助工具栏的高度了。如果您对其他太大的东西有任何想法，请在错误报告中添加评论。
  
  2014 年 2 月 18 日下午 1:51
Hai

嗨 Brian,
我看了最新的 nightly，它非常接近真正的节食 :-)

我真的很喜欢 “切换分割控制台” 功能，但在我看来，在调试窗口中使用控制台时，（控制台）菜单栏应该隐藏，因为它占用了太多空间。

另一件非功能性的事情是，如果可以扩展 API 文档会很好，阅读一些关于样式的说明也很不错，这样扩展就可以很好地集成到 DEV 工具主题中。

感谢您的回复

2014 年 2 月 18 日下午 2:39
1. Brian Grinstead
  
  我们讨论过在分割模式下删除控制台工具栏，但最终决定如果您的过滤器设置不正确，并且您错过了日志语句，可能会令人困惑。因此我们决定保留该工具栏。我认为我们应该在更细长的工具栏落地后重新审视它：https://bugzilla.mozilla.org/show_bug.cgi?id=942292，因为它们可能会解决高度问题。
  
  2014 年 2 月 18 日下午 3:03
Ben

如何在样式编辑器中显示显示颜色的圆圈？在 Aurora 或 Nightly 中都看不到它们。

2014 年 2 月 18 日下午 3:08
1. Heather Arthur
  
  它们现在只出现在检查器的规则部分，不幸的是。虽然我们在样式编辑器中显示颜色样本，但这是我们想要的功能。
  
  2014 年 2 月 18 日下午 3:27
Matthew Balaam

每个人都能让页面刷新工作吗？我在 Windows 7 上使用最新的 Aurora，我的文件正在使用 Prepros 自动编译，但我必须手动刷新才能看到任何更改。

此外，是否有计划让编辑的文件自动保存到当前位置，而无需查找它？

2014 年 2 月 19 日上午 2:51
1. Heather Arthur
  
  如果您已按照上述步骤操作，但它在保存时没有刷新样式，那么很可能是一个错误。
  
  查看 Nightly (http://nightly.mozilla.org)，因为那里有一些错误修复。否则，如果您能提供错误报告：https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20Style%20Editor。
  
  您所说的保存到当前位置是什么意思？Firefox 无法知道磁盘上文件的路径，除非您告诉它。您是否是指在将它保存到某个位置后，它应该记住它？
  
  2014 年 2 月 19 日上午 11:37
  1. Matthew Balaam
    
    我已经尝试了 nightly，但它仍然没有更新，所以我将提交一个错误报告。
    
    我在写最初的内容时没有想清楚，但也许可以有一种方法可以映射某些域，例如，将 localhost 根目录设置为我的开发文件的根目录？
    
    2014 年 2 月 20 日上午 2:02
    1. Heather Arthur
      
      感谢您说明。能够设置根目录将是理想的选择。我们正在考虑为此类功能设计一个好的 UI。
      
      2014 年 2 月 20 日下午 6:44
      1. Matthew Balaam
        
        我进一步测试了它。如果我尝试使用 WAMP 而不是 Tomcat 作为我的服务器，我将看不到任何实时刷新。
        
        然后我尝试了一个通过文件系统加载的静态页面，并进行了更改，当 Prepros 编译时，重新加载立即发生。
        
        然后我尝试了 Chrome，它表现出相同的行为，但它在历史记录面板中有一个链接 “应用原始内容”，点击该链接会加载新的样式。
        
        我最好的猜测是，如果其他所有人都能正常使用此功能，那么我的设置中存在一些问题。如果有人对如何尝试让此功能正常工作的任何想法，我们将不胜感激。
        
        2014 年 3 月 6 日上午 1:48
Camille Bissuel

干得好！还有 Stylus 吗？
http://learnboost.github.io/stylus/

2014 年 2 月 19 日上午 9:21
1. Heather Arthur
  
  Stylus 目前无法生成源映射，因此您无法使用此功能。不幸的是。
  
  2014 年 2 月 19 日上午 11:10
  1. Camille Bissuel
    
    显然...
    无论如何感谢您的回答；)
    
    2014 年 2 月 20 日上午 5:39
Alex Bell

感谢 Heather，您真棒。看到 FF 开发工具踏上重夺至高王位的道路，真是太棒了。继续努力吧。

“填充控制” 很好，但我认为仍然可以进行更多清理。在我看来，主工具栏右侧几乎所有图标都值得商榷。

– “选择元素” 与右键单击 “检查” 冗余。它总是只是另一种回到按钮将其关闭的旅程，这样我就可以滚动查看检查器规则。我讨厌它。也许只是我。
– JS Scratchpad 对于教育来说很酷，但我从未用它来调试。也许只是我。把它放在菜单中。
– 3D 视图。再次，把它埋起来。太酷了……然而……在生产中毫无用处。
– 切换拆分控制台按钮。每个人都知道迷你控制台是“ESC”。事实上的标准。这是一个很酷的技巧，但它真的需要在 UI 中占用专门的空间吗？

我可以继续说下去。我强烈预感我不是唯一一个这样想的人。不要仅仅模仿 Chrome，无论如何。创新很棒。但是 Devtools 的圣诞树仍然需要修剪。

2014 年 2 月 19 日下午 6:19
1. Brian Grinstead
  
  好主意 - 我为此提交了一个错误：https://bugzilla.mozilla.org/show_bug.cgi?id=974947。IMO，“选择元素”和拆分控制台按钮应该始终存在，但其他 4 个应该可以移除。如果你想进一步讨论，请随时在错误中发表评论。
  
  2014 年 2 月 20 日上午 8:46
Scott Gilbertson

这很棒。或者更确切地说，这个，加上 Devtools 中对 Vim 键绑定的支持，远远超过 Chrome。在浏览器中使用 Vim 进行实时编辑 Sass。人们实际上购买了 Dreamweaver。

为了配合 Alex Bell 的想法，我一直认为开发者工具应该提供一个选项，允许你切换你想要的特性……现在，特别是停靠在侧面时，试图弄清楚哪个图标是做什么的，就像破译象形文字一样。

2014 年 2 月 19 日下午 6:35
Ronan Jouchet

太棒了！接近此功能，但在 JS 方面，我非常喜欢 Chrome 的文件系统/资源映射和内部脚本重新加载，正如在 http://www.youtube.com/watch?v=O3W1yuq-ZlE#t=136 中演示的那样，它是否计划用于 Firefox？是否有我们可以跟踪的正在进行开发的错误？

2014 年 2 月 19 日下午 7:07
1. Heather Arthur
  
  就实时 JS 编辑而言，这里有一个你可以关注的错误：https://bugzilla.mozilla.org/show_bug.cgi?id=771339。
  
  文件系统映射已计划，但尚未明确定义。
  
  2014 年 2 月 20 日下午 6:51
Luke

不错！我假设这仅仅用于本地开发？另外，JS 源映射不是在其中一个 Firefox 版本中工作了吗？

2014 年 2 月 19 日下午 10:22
1. Nick Fitzgerald
  
  源映射在调试器中使用 js 工作了很长时间。
  
  2014 年 2 月 20 日下午 6:58
2. Heather Arthur
  
  嗨 Luke，你能解释一下你所说的本地开发是什么意思吗？你是想问它是否适用于远程调试移动设备上的页面，还是仅仅调试托管在服务器上的页面？
  
  JS 源映射支持自 Firefox 23 开始就存在。
  
  2014 年 2 月 20 日下午 7:04
  1. Luke
    
    我的意思是这些适用于本地测试设置中的本地 scss 文件。
    
    对于 JS 源映射，我的意思是这个功能（我知道我之前看到过一篇关于它的文章）：http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
    
    我假设还没有办法使用此 JS 源映射功能来处理应用于远程 JS 文件的本地源映射？
    
    2014 年 2 月 20 日下午 11:32
Jay

是否计划支持 Sass 的原生调试输出？

2014 年 2 月 23 日上午 7:33
1. Heather Arthur
  
  你所说的支持是什么意思？你认为 Devtools 可以显示一些有用的东西吗？
  
  2014 年 3 月 12 日上午 1:21
James

嗨，我想知道是否计划在任何时候允许更改控制台输出？目前标准输出在许多情况下非常无用，需要在命令之后添加额外的“.toString()”，将其包装在“pprint()”或“inspect()”中，或者把手从键盘上移开，点击输出。

能够指定自定义格式化程序会很好，据我所知，即将推出的 Dev Tools API 没有任何类似的功能。能够看到命令的有用输出（特别是通过 FireQuery 的 jQuery 对象）几乎是目前唯一阻止我全职使用新开发者工具的东西。

谢谢！

2014 年 3 月 10 日下午 5:24
1. Luke
  
  我怀疑是否会有官方 API，但是的，这绝对有可能。
  
  我正在尝试在 Devtools-tweaks webconsoleOutputBetter 分支中更改控制台输出，它更改了控制台输出。
  
  https://github.com/programmin1/DevTools-Tweaks/compare/master…webconsoleOutputBetter
  
  我还最近为 David Bruant 的实验性 Useful-Stack-Trace Firefox 插件做了一个小修复，它使堆栈跟踪直接链接到原始文件，而不是 Usefulstacktrace 本身。这可以作为工作示例。
  
  https://github.com/DavidBruant/usefulStackTrace/pull/10
  
  作为旁注，你应该查看 Firefox Nightly（版本 30），它在 Web Console 中有更好的显示！例如，它显示了数组，而不是仅仅显示 [object Array] 然后需要点击。
  
  2014 年 3 月 11 日下午 9:53
  1. James
    
    我实际上刚检查了一下，这台机器仍然有 FF 23，这意味着自从我安装它以来就没有更新……可能禁用了自动更新。无论如何，我也安装了 Nightly，虽然新外观很…有趣…但我不仅可以看到空数组或 jQuery 实例之间的区别，还可以检查它们的内容：)
    
    这比我预期的要好，感谢你告诉我 - 这将节省很多麻烦！：)
    
    2014 年 3 月 12 日上午 5:49
Chris Eppstein

Sass 3.3 已发布。你不再需要 –pre 来安装源映射支持。

2014 年 3 月 11 日上午 11:51
1. Heather Arthur
  
  感谢你的提示，Chris。
  
  2014 年 3 月 11 日下午 11:24

本文的评论已关闭。

Hacks

作者 Heather Arthur，Robert Nyman [荣誉编辑]

1. 生成源映射

Sass

Less

2. 在开发者工具中启用源映射

3. 设置文件监控

Sass

Less

4. 保存原始源代码

关于 Heather Arthur

关于 Robert Nyman [荣誉编辑]

32 条评论

在 Firefox 开发者工具中实时编辑 Sass 和 Less

作者 Heather Arthur，Robert Nyman [荣誉编辑]

1. 生成源映射

Sass

Less

2. 在开发者工具中启用源映射

3. 设置文件监控

Sass

Less

4. 保存原始源代码

关于 Heather Arthur

关于 Robert Nyman [荣誉编辑]

发现 Web 开发的宝贵资源

感谢您！请检查您的收件箱以确认您的订阅。