If you work on the front-end of a site in any capacity – be it for a plugin, a theme, or even something outside of WordPress – you’re likely working with minification tools.
The benefits are obvious, right?
- it lessens the payload,
- it allows us to focus on development on our local environments
But one of the features that come with working with these technologies and that’s the ability to generate source maps.
And this raises a question (or maybe two): What are source maps? And are they even needed?
You can claim it’s late to the game to talk about this, but there are always people entering the industry that may not know this material.
So why not cover it?
What Are Source Maps?
In short, source maps are a way for modern browsers to take the minified code and allow us to read the code in its unminified state.
For example, in a project on which I’ve been working, I have a simple file, plugin-setting.scss, that gets minified into plugin-setting.css. This file is then enqueued by WordPress.
I also, however, have my build tool generating a source map. This means that I also have a file called plugin-settings.css.map.
So the code that’s shipped with the plugin looks like this:
But when viewed in the browsers debug tool looks like this:
And source maps can be generated for both stylesheets and JavaScript.
Are They Needed?
I can’t give a specific yes or no to this; however, I’ve found the longer I work in this industry, and on projects, I find them much more helpful than the alternative (which is usually enqueueing the unminified style for debugging purposes).
I recommend that you generate them and include them because it makes debugging easier. But whether or not they are needed is up to you or your team.