Source Maps

One of the easiest and effective performance wins you can gain for your website is to combine and compress your JavaScript and CSS files. But it will be really difficult and frustrating to debug the code within those compressed files. There is a solution for this and it goes by the name of source maps.

A source map provides a way of mapping code within a compressed file back to it’s original position in a source file. This means with the help of a bit of software, you can easily debug your applications even after your assets have been optimized. Most of the browsers (Chrome, Firefox, etc.) developer tools comes with built-in support for source maps.

Original main.css

body {
  background-color: rgb(27, 150, 199);
  color: white;
}

Optimized main.min.css

body{background-color:#1b96c7;color:#fff}
/*# sourceMappingURL=main.min.css.map */

Source map main.min.css.map

{"version":3,"sources":["custom/main.scss"],"names":[],"mappings":"AAEA,KACE,wBAAmC,CACnC,UAJgB","file":"main.min.css","sourcesContent":["$font-color: white;\r\n\r\nbody {\r\n  background-color: rgb(27, 150, 199);\r\n  color: $font-color;\r\n}\r\n"]}

There are plenty of free plugins are available to optimize styles, scripts and create source maps for them.
Optimize styles
Optimize Scripts
Create Sourcemaps

Source maps allows developers to maintain a straight-forward debugging environment while at the same time optimizing their sites for performance.