It’s not always common to find this error creeping in your network logs. But many a times, you will be finding an error or two for the map files missing. Let’s analyse why this happens and how to fix it. So, for those who haven’t seen or unable to relate to your experience, the issue is as follows. When you open a website for the first time, whether the one that you created or a template that you purchased, you might get this dreaded error in the network:
The first question is, you would have no idea why this error comes up and what causes this error to pop-up. You haven’t created something like this file or you are totally sure, you didn’t try to create this file at all. Still you are unsure from where this error comes.
If Chrome Developer Tools is reporting a 404 for a
.map file (maybe
jquery-1.9.3.min.map, but can happen with anything), the first thing to know is this is only requested when using the Chrome Developer Tools. Your users will not be hitting this 404. Or your users’ actions will not cause this request. This is a special functionality called Source Mapping.
- sources are often combined and minified (process of removing unnecessary or redundant data without affecting how the resource is processed by the browser) to make delivering speed from the server more efficient.
When an error occurs in this situation, it would be really easy to debug the original source code than debugging the compiled or minified version, as a developer will be working only on the original source files not the compiled version. In these situations, it's much easier to debug the original source, rather than the source in the transformed state that the browser has downloaded.
A source map is a file that maps from the transformed source to the original source, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger.
To enable the debugger to work with a source map, you must:
- generate the source map
- include a comment in the transformed file, that points to the source map. The comment's syntax is like this:
This way, when the debugger is started or an instance of Chrome Developer Tools is opened, it will try to load the source-map from the above URL.
You have two ways to disable this error from creeping. One, the recommended way and another, obviously a hack-job, which is local to your browser installation. Let’s have a look at both the methods.
Create a Source Map and use them along with the minified file. (recommended)
Disable the Source Mapping feature in your Chrome Developer Tools. (sourcemaps) (not recommended)
Let’s look at both the methods and you decide which method you would like to go for.
Generating the Source Map
If the problem occurs because of jQuery or any library, it’s easier to find the right files from their download pages. Head over to Download jQuery page, for example. You can find the following in the jQuery download page:
The map file is not required for users to run jQuery, it just improves the developer's debugger experience.
So, get the files from jQuery to fix the problem. You should be able to find the following link:
Get the necessary files and add them with your minified files. This is the best way, and the right way, because you will be able to debug the contents using the original file mapping. Having the map file in place allows you to debug your minified jQuery via the original sources, which will save a lot of time and frustration if you don't like dealing with variable names like
Hack Job: Disabling Source Mapping
Disable both the following options:
- Enable CSS source maps
Now you will know how to get rid of the error. Either you can disable it completely just for you, or you may better try to fix the problem instead of using a hack job.