Source Map Error [duplicate] - javascript

This question already has answers here:
jQuery's jquery-1.10.2.min.map is triggering a 404 (Not Found)
(11 answers)
Closed 9 years ago.
I've recently started having this problem with all my projects. When my index page loads which contains a reference to the jquery source file, my console logs this error: GET http://localhost:3000/js/lib/jquery-1.10.2.min.map 500 (Internal Server Error).
This doesn't affect my application at all, but it's really annoying to see whenever I open up the console. Does anyone know where this is coming from?
Edit: Note that I'm not explicitly referencing the .map file, I am just pointing to <script src="js/lib/jquery-1.10.2.min.js"></script>

jQuery recently started using source maps.
For example, let's look at the minified jQuery 2.0.3 file's first few lines.
/*! jQuery v2.0.3 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
//# sourceMappingURL=jquery.min.map
*/
Excerpt from Introduction to JavaScript Source Maps:
Have you ever found yourself wishing you could keep your client-side
code readable and more importantly debuggable even after you've
combined and minified it, without impacting performance? Well now you
can through the magic of source maps.
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.
emphasis mine
It's incredibly useful, and will only download if the user opens dev tools.
Solution
Remove the source mapping line, or do nothing. It isn't really a problem.
Side note: your server should return 404, not 500. It could point to a security problem if this happens in production.

I had similar expirience like yours. I have Denwer server. When I loaded my http://new.new local site without using via script src jquery.min.js file at index.php in Chrome I got error 500 jquery.min.map in console. I resolved this problem simply - I disabled extension Wunderlist in Chrome and voila - I never see this error more. Although, No, I found this error again - when Wunderlist have been on again. So, check your extensions and try to disable all of them or some of them or one by one. Good luck!

Related

Chrome sources not showing a file that was generated from Typescript and has a source map

I have a file that is dynamically loaded by sapui5 as a controller. I have altered my code so that I can leverage Typescript for Intellisense and fault detection.
My JS file is successfully created, and runs correctly in Chrome. The DevTools/Sources/Network window does not list my 'FinalAssembly.controller.js' file, nor does it list the similarly named 'FinalAssembly.controller.ts' file.
I have found that if I remove the '//# sourceMapURL=' line from the bottom of my file, Chrome will eventually list my JS file.
I had read that use of the '//# sourceURL=' line at the top of my file would cause my file to be listed, but it wasn't, further, I read that use of this directive should allow me to vary the name that is displayed in the Sources list, it doesn't. It appears that Chrome is ignoring this directive.
As of today, Chrome indicates that it is up to date at version 66. I have read lots of articles and Github issues over the last 4 hours that indicate that Source Maps tend to be problematic and can fail in some versions of Chrome.
The map file itself works in Internet Explorer, but I can't really see myself developing with that.
Has anybody debugged JS with a Source Map in Chrome 66? Can anybody suggest how I can debug my map file usage in Chrome?
I have placed a very simple test created via VSCode (tsc.exe) at my website: http://www.ia.uk.com/TypescriptTest/default.htm - on my Chrome 66 this one doesn't seem to download the map file at all (Fiddler didn't see any request for that). Doesn't show any TS view of the code. This is not a dynamically loaded library as per my original problem, but does show that there is a problem.
It turns out that DevTools has it's own set of settings. The preferences tab has a "Enable Javascript Source Maps", which was switched off in my copy. I don't recall ever being in that screen, but obviously this box got unchecked.
For normal JS files as in my small example, both JS and TS files are displayed. When the file is dynamic, only the TS file is displayed. This means that if maps are disabled, you get nothing (because the JS file isn't displayed).
Just open devTools and reset the browser.
Make sure your Angular app is up.
If your Angular app is not up, then you can't see the .ts file in Chrome. So you need to first run the Angular app.

Missing Javascript ".map" file for Underscore.js when loading ASP.NET web page [duplicate]

This question already has answers here:
jQuery's jquery-1.10.2.min.map is triggering a 404 (Not Found)
(11 answers)
Closed 8 years ago.
I have a web page that is part of a ASP.NET web site running on Azure. It's run fine for quite a while now. Out of the blue, I am suddenly having a problem with the browser trying to download a ".map" for Underscore.js. I did some reading and apparently JQuery creates ".map" files as debugging aids for Javascript source files (".js"). However, if I look at the Scripts directory for my web site I see that this only happens for some JQuery source files and not all and I am not sure what the pattern is.
However, why would the browser be trying to load a "map" file for Underscore.js which is not part of JQuery? Also, why would this suddenly start happening? I added Underscore.js to the web page quite some time ago and never had this problem before.
The exact error I get when I look in the Chrome Debugger Console tab is:
GET http://myazureapp.cloudapp.net/Scripts/underscore-min.map 404 (Not Found) Scripts/underscore-min.map:1
What you're experiencing is source mapping. This allows you to debug with readable code in your browser's developer tools when working with minified JS files.
The minified version of Underscore has this line at the end of the file:
//# sourceMappingURL=underscore-min.map
Your browser's developers tools will try to download underscore-min.map when encountering this line.
If you want to get rid of the error, either:
Remove that line from underscore-min.js
Add underscore-min.map and underscore.js to your project.

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
Where is this coming from?
If Chrome DevTools is reporting a 404 for a .map file (maybe jquery-1.10.2.min.map, jquery.min.map or jquery-2.0.3.min.map, but can happen with anything) first thing to know is this is only requested when using the DevTools.
Your users will not be hitting this 404.
Now you can fix this or disable the sourcemap functionality.
Fix: get the files
Next, it's an easy fix. Head to http://jquery.com/download/ and click the Download the map file link for your version, and you'll want the uncompressed file downloaded as well.
Having the map file in place allows you do 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 a and c.
More about sourcemaps here: An Introduction to JavaScript Source Maps
Dodge: disable sourcemaps
Instead of getting the files, you can alternatively disable JavaScript source maps completely for now, in your settings. This is a fine choice if you never plan on debugging JavaScript on this page.
Use the cog icon in the bottom right of the DevTools, to open settings, then:
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)
As announced at jQuery 1.11 and 2.1 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.
Download the map file and the uncompressed version of jQuery.
Put them with the minified version:
Include minified version into your HTML:
Check in Google Chrome:
Read Introduction to JavaScript Source Maps
Get familiar with Debugging JavaScript
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 :)
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.
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
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.
jQuery 1.11.0/2.1.0 the // sourceMappingURL comment is not included in the compressed file.
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:
In Apache this could be done with with the <FilesMatch> directive or a RewriteRule if you're using mod_rewrite.
In IIS you'd need to look to the Web.config file.

Where does load-scripts.php load jquery.js file from?

I try to debug a javascript function called from Generate Thumbnails plugin in Wordpress. The function uses jquery. So the actual call that I want to debug occurs in jquery.
The problem is that default jquery.js inside Wordpress is minimized and therefore obscure. I changed that file with the uncompressed version of jquery.js file in wp-includes\js\jquery.
But when I debug that function with Firebug's debugger, Firebug still shows me the old, minimized version of jquery:
I copied the location of the script file shown in Firebug and opened it in browser: http://localhost/wordpress/wp-admin/load-scripts.php?c=1&load=jquery,utils,jquery-ui-core,jquery-ui-widget&ver=368b0ffbc13bc55b5ae45ad40a5368d9
This time, the true, uncompressed version of jquery.js was opened.
It seems like Firebug opens the old version of jquery. I restarted the Firefox but it wasn't resolved.
What might be the reason of this problem? Is this Firebug related or Wordpress related?
I'd agree with the people who commented on your question - it seems like a browser cache problem.
If it's a test system, one thing I'd suggest is setting the WP_DEBUG constant to true in your wp-config. That'll download the uncompressed versions of the javascript libraries. That has two advantages:
You don't have to copy different javascript files around, and
The file names differ from the standard ones (they have .dev in them, from memory), so you shouldn't hit any caching issues.
I'm assuming there's an uncompressed version of jquery in WordPress. Apologies if there isn't; I haven't checked. But in general I'd recommend this approach.
See Debugging in WordPress in the codex for more information.

How do you debug through a compressed JavaScript file? [duplicate]

This question already has answers here:
How to debug obfuscated JavaScript?
(4 answers)
Closed 4 years ago.
I'm using django-compress to shrink my JavaScript files. However, I am now having trouble debugging through it because everything is squished. I believe Stack Overflow use some kind of JavaScript compression too. How do you go about to debug through your JavaScript code on the live site or on your development machine with the code well formatted?
Firebug has all the code in one line which makes it hard to dig through.
The simple answer is you don't debug through a compressed file - you use an uncompressed version for development.
I see an answer has already been accepted, but I am adding a new answer since this is the first result I got on Google and think this new info may help someone.
Some browser DevTools now support Source Maps to map built javascript to is unbuild readable state. You have to minify and/or combine the JS with a tool that supports creating Source Maps. But if you do you can see the original code when debugging the minified/combined javascript.
Find more info here:
https://developers.google.com/chrome-developer-tools/docs/javascript-debugging#source-maps
If you are using Google Closure, then there is a plugin that allows you access the unminified version of the code. See the documentation on the Inspector and the source mapping feature.
Some suggestions:
Don't compress until you deploy to production
Reload your source code after the compress code; it will write over the compressed code
When it's worth the investment, I take compressed code and manually uncompress it

Categories