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

I'm seeing error messages about a file, min.map, being not found:

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


Screenshot

enter image description here

Where is this coming from?

This question is related to javascript jquery google-chrome-devtools

The answer is


Assuming you've checked the file is actually present on the server, this could also be caused by your web server restricting which file types are served:


  1. Download the map file and the uncompressed version of jQuery.
    Put them with the minified version:

    JavaScript

  2. Include minified version into your HTML:

    HTML

  3. Check in Google Chrome:

    Google Chrome

  4. Read Introduction to JavaScript Source Maps

  5. Get familiar with Debugging JavaScript


As I understand the browser, Chrome at least, it doesn't disable the source mapping by default. That means your application's users will trigger this source-mapping request by default.

You can remove the source mapping by deleting the //@ sourceMappingURL=jquery.min.map from your JavaScript file.


I was presented with the same issue. The cause for me was Grunt concatenating my JavaScript file.

I was using a ;\n as a separator which caused the path to the source map to 404.

So dev tools was looking for jquery.min.map; instead of jquery.min.map.

I know that isn't the answer to the original question, but I am sure there are others out there with a similar Grunt configuration.


After following the instructions in the other answers, I needed to strip the version from the map file for this to work for me.

Example: Rename

jquery-1.9.1.min.map

to

jquery.min.map


As it is announced in jQuery 1.11.0/2.1.0 Beta 2 Released the source map comment will be removed so the issue will not appear in newer versions of jQuery.

Here is the official announcement:

One of the changes we’ve made in this beta is to remove the sourcemap comment. Sourcemaps have proven to be a very problematic and puzzling thing to developers, generating scores of confused questions on forums like StackOverflow and causing users to think jQuery itself was broken.

Anyway, if you need to use a source map, it still be available:

We’ll still be generating and distributing sourcemaps, but you will need to add the appropriate sourcemap comment at the end of the minified file if the browser does not support manually associating map files (currently, none do). If you generate your own jQuery file using the custom build process, the sourcemap comment will be present in the minified file and the map is generated; you can either leave it in and use sourcemaps or edit it out and ignore the map file entirely.

Here you can find more details about the changes.


Here you can find confirmation that with the jQuery 1.11.0/2.1.0 Released the source-map comment in the minified file is removed.


The new versions of jQuery require this file http://code.jquery.com/jquery-1.10.2.min.map

The usability of this file is described here http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

Update:

jQuery 1.11.0/2.1.0

// sourceMappingURL comment is not included in the compressed file.


If you want to get source map file different version, you can use this link http://code.jquery.com/jquery-x.xx.x.min.map

Instead x.xx.x put your version number.

Note: Some links, which you get on this method, may be broken :)


jQuery 1.11.0/2.1.0 the // sourceMappingURL comment is not included in the compressed file.


You can remove the 404 by removing the line

//@ sourceMappingURL=jquery-1.10.2.min.map

from the top part of your jQuery file.

The top part of the jQuery file will look like this.

/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
//@ sourceMappingURL=jquery-1.10.2.min.map
*/

Just change that to

/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license */

Purpose of a source map

Basically it's a way to map a combined/minified file back to an unbuilt state. When you build for production, along with minifying and combining your JavaScript files, you generate a source map which holds information about your original files. When you query a certain line and column number in your generated JavaScript you can do a lookup in the source map which returns the original location. Developer tools (currently WebKit nightly builds, Google Chrome, or Firefox 23+) can parse the source map automatically and make it appear as though you're running unminified and uncombined files. (Read more on this here)


Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to jquery

How to make a variable accessible outside a function? Jquery assiging class to th in a table Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Getting all files in directory with ajax Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) bootstrap 4 file input doesn't show the file name Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource how to remove json object key and value.?

Examples related to google-chrome-devtools

When adding a Javascript library, Chrome complains about a missing source map, why? Chrome dev tools fails to show response even the content returned has header Content-Type:text/html; charset=UTF-8 Is there any way to debug chrome in any IOS device Is it possible to open developer tools console in Chrome on Android phone? What does ==$0 (double equals dollar zero) mean in Chrome Developer Tools? Understanding Chrome network log "Stalled" state How to use color picker (eye dropper)? Bizarre Error in Chrome Developer Console - Failed to load resource: net::ERR_CACHE_MISS Google Chromecast sender error if Chromecast extension is not installed or using incognito How to open the Chrome Developer Tools in a new window?