With source maps (i.e. the .css.map files), we can use our browser’s developer tools to view the original Sass source, instead of the compiled CSS, when debugging styles.
View SCSS Code
Chrome Dev Tools > Settings > Check: Enable CSS source maps > Check: Auto-reload generated CSS.
Now that we’ve been enabled to source maps in the browser, any time we inspect an element over in the Styles panel, we can see how every style is coming from the source SCSS right down to the partial name and line number.
Debug SCSS Code
Click on the SCSS file name.
The Source panel will open where you can view and edit the original SCSS file.