backbone-min.map 404 (Not Found)

Hi, I recently started to play around with some web development. I got assigned to a project that was already in development. In the Chrome console (devTools) there was an error:

GET http://localhost/js/libs/backbone/backbone-min.map 404 (Not Found)

As you can see my problem is with the backbone, but it doesn't matter. It can be problem with jQuerry, or any other library. If you are interested how to remove this error read more.
Similar error would be

GET jQuery's jquery-1.10.2.min.map is triggering a 404 (Not Found)

This basically means that  you are missing a source map of mnified version of jQuerry, or Backbone in my case.

What is minification?

Before you deploy your web site to the server for the rest of the world to see you might want to minify your Java Script files. Minification will remove all unnecessary characters from the Java Script code. This usually means all unnecessary white spaces, tabs, indentation that make code more human readable. Also variable names will be substituted with shorter names, usually only one character.
So minification will conver this code:

function(myFirstVariable, mySecondVariable) {
    //this will sum my two variables
    var sumOfMyVariables = myFirstVariable + mySecondVariable;
}

to smaller version like this:
function(a,b){var c=a+b;}

The up side of this is that the Java Script file will be significantly smaller, so it will load faster. Downside is that the minified java Script file will be pretty hard to read (and debug). But you will still have original file on your computer so you can leave all unminified files on your development environment, and minify only before deploying. You can read more about minification on Wikipedia. Anoter nice article about minification can be found ProgrammerInterview.com

What is a Source Map

As you may noticed this type of compression loses some data and cannot be converted back to original. If you are looking at the minified code and you see variable with name "a" you cannot know what was the original name of the variable before minification. You cannot know how many white spaces was there before any given line. Also all the comments are lost for ever. Source map can help you to debug minified code. It can make it readable again. Lot more about Source Maps can be learned here

Solution

Go to Backbone.js website and search for the source map file and dowload it. You will find it under "Downloads & Dependecies" next to the "Product Version" button. After downloading bacbone-min.map file just put it to the folder your browser expects it. In my case that is "/js/libs/backbone/"

For jQuerry go to Download page of jQuerry website and look for Download the map file for jQuery 1.11.2

Also if you are on Linux or Mac after you download and copy your file to the right place you will maybe still see the same error. Cause of this might be lack of permission to read this file. After I moved "backbone-min.map" file to my development folder "js/libs/backbone" i used ll command to list content of my folder. This is the result:

-rw-r-----@ 1 yourusername  staff    27K Oct  2 18:32 backbone-min.map

-rw-r--r--  1 yourusername  wheel    19K Sep 26 22:26 backbone.js

As you can see, owner can read and write to the file -rw. Group can only read the file -r--. Others cannot even read from the file. So I just granted the read permission to others with the command.
...js/libs/backbone $ chmod o+r backbone-min.map

This adds read (+r) to others (o+r). If you would to remove read from others you would use o-r. Read this nice explanation of using chmod to change permissions.

Hope this helps.