Less / Sass调试在Chrome开发工具/ Firebug [英] Less/Sass debugging in Chrome Dev Tools/Firebug

问题描述

你们如何对使用Less / Sass构建的CSS进行维护？

How do you guys do maintenance on CSS built with Less/Sass?

我喜欢Dev Tools / Firebug的一件事是看到行css样式的编号。有没有好的方法来使用CSS预处理器，而不是手动搜索.less / .scss文件来找到我想要修改的代码？

One of the things I like about Dev Tools/Firebug is the ability to see the line number of a css styling. Is there a good way to do this with CSS preprocessors other than having to manually search through the .less/.scss file to find the code I want to modify?

推荐答案

Chrome开发人员工具现在支持Sass调试即开即用。

Chrome Developer Tools now supports Sass debugging out-of-the-box.

更新为包含源地图： strong>

以前的版本在css中使用内联注释来提供对源代码的引用（参见下面的how-to）。 sass（3.3+）和chrome（31+）的最新版本使用源映射：

Updated to include source maps:
Previous versions used inline comment in your css to provide a refernce to the source code (see below how-to). recent versions of sass (3.3+) and chrome (31+) use source maps for that:

1. 确保您拥有Sass 3.3.x


2. 使用 - sourcemap 标志编译您的Sass。


3. 打开设置并点击一般。


4. 打开启用CSS源地图。

1. Make sure you have Sass 3.3.x
2. Compile your Sass with the --sourcemap flag.
3. In Chrome/ium DevTools open settings and click general.
4. Turn on "Enable CSS source maps".

信息可以在Chrome开发工具博客中找到：
https://developers.google。 com / chrome-developer-tools / docs / css-preprocessors

More info is available on the Chrome dev tools blog: https://developers.google.com/chrome-developer-tools/docs/css-preprocessors

旧版本：

1首先，你应该用 - debug-info 编译你的Sass。

2.在Chrome / ium中转到about：flags

3.启用开发人员工具实验

4.在您的检查器（F12）中，打开设置，然后转到实验选项卡
并选中支持SASS 。

Older versions:
1. First, you should compile your Sass with --debug-info turned on.
2. In Chrome/ium go to about:flags
3. Enable Developer Tools experiments
4. In your inspector (F12), open "Settings", then go to the "Experiments" tab and check "Support for SASS".

这篇关于Less / Sass调试在Chrome开发工具/ Firebug的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！