Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why am I getting "jquery.mobile-1.3.2.min.map file not found" message in Chrome

I'm using these three CDN files, as recommended on getting started in JQM documentation:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

I'm perplexed why I'm getting a 404 Not found status under the Network tab in Chrome. Seems to be looking jquery mobile min.map file. I don't see this in Firefox.

Any thoughts as to why it's looking for this file?

like image 996
ek_ny Avatar asked Aug 22 '13 13:08

ek_ny


2 Answers

Probably your Google Chrome DevTools has enabled the option "Enable source maps". Check your Settings menu, then General and Sources.

A source map file 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.

More information here.

like image 161
Jonathan Naguin Avatar answered Nov 11 '22 12:11

Jonathan Naguin


File not found : 404 will be shown only in browser developer tools. If developer tools are not opened the sourcemap file will not be accessed from browser

You can remove the 404 by removing the line

//@ sourceMappingURL=jquery-1.x.xmin.map

from the top (or bottom as @ittradco mentioned in comment ) 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.x.x.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)

like image 22
kiranvj Avatar answered Nov 11 '22 13:11

kiranvj