LESS / SASS / STYLUS Chrome开发工具和Firebug调试

Question

我正在为某些项目选择css预处理器，并希望确保它可以在Firebug和Chrome检查器中进行调试（以查看.less .scss .styl中的实际行）。目前是否可以为这3个预处理器设置chrome / ff调试？

Answer 1

对于支持CSS源地图的预处理器，Chrome DevTools允许您在“源”面板中实时编辑预处理器源文件，并查看结果，而无需离开DevTools或刷新页面。当您检查其样式由生成的CSS文件提供的元素时，“元素”面板将显示指向原始源文件的链接，而不是生成的.css文件。

要使用此工作流程，您的CSS预处理器必须支持CSS源映射，特别是Source Map v3提议。 CSS源映射必须与CSS文件一起构建，因此DevTools可以将每个CSS属性映射到原始源文件中的正确位置（例如，.scss文件）。

您可以在https://developers.google.com/chrome-developer-tools/docs/css-preprocessors

阅读更多信息

Answer 2

如果其他人在此处结束，要在Chrome for Sass中使用源地图，您需要先使用--sourcemap标志生成它们！

sass --watch --sourcemap --debug-in sass/screen.scss:screen.css

更多信息：https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#debugging-sass

--debug-info标志会将css设置为与FireSass一起使用。