我正在为某些项目选择一个 css 预处理器，并希望确保它可以在 Firebug 和 Chrome 检查器中进行调试（查看 .less .scss .styl 中的实际行）。 目前是否可以为这 3 个预处理器设置 chrome/ff 调试？
【问题讨论】：
标签： css sass firebug less stylus
对于支持 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阅读更多信息
【讨论】：
如果其他人在这里结束，要在 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。
【讨论】：