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

Question

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

Answer 1

对于支持 CSS 源映射的预处理器，Chrome DevTools 允许您在 Sources 面板中实时编辑预处理器源文件，并查看结果，而无需离开 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 一起使用。