Questions tagged [source-maps]
A source map allows a JavaScript debugger to map line and symbol information from a transformed (eg. minified, optimized) JavaScript file back to the original input file used for the transformation. The original file can be any kind of text file which in effect enables in-browser debugging of any language compiling to JavaScript.
source-maps
1,133
questions
548
votes
5
answers
251k
views
How can I use JavaScript source maps (.map files)?
Recently I have seen files with the .js.map extension shipped with some JavaScript libraries (like Angular), and that just raised a few questions in my head:
What is it for? Why do the guys at ...
- 26.7k
504
votes
8
answers
358k
views
what are the .map files used for in Bootstrap 3.x?
There are two files included in the CSS folder with .map file extensions. They are:
bootstrap-theme.css.map
bootstrap.css.map
They appear to be minified files but I don't know what they are for.
- 6,358
396
votes
6
answers
277k
views
How do I generate sourcemaps when using babel and webpack?
I want to set up a config to generate sourcemaps. I'm running webpack serve from the command line, which compiles successfully. But I really need sourcemaps. This is my webpack.config.js.
var webpack =...
user916367
142
votes
3
answers
101k
views
Disable source maps in Chrome DevTools
Is there a quick way to switch from the jsx code shown in Chrome DevTools to the raw ES5 and back again?
- 14.8k
128
votes
19
answers
599k
views
How can I fix the "DevTools failed to load SourceMap: Could not load content" error when adding a JavaScript library?
My code
<html>
<head>
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<!-- Load Posenet -->...
- 1,786
103
votes
9
answers
42k
views
"Unknown provider: aProvider <- a" How do I find the original provider?
When I'm loading the minified (through UglifyJS) version of my AngularJS application, I get the following error in the console:
Unknown provider: aProvider <- a
Now, I realize that this is due to ...
- 21.9k
99
votes
10
answers
126k
views
How to disable source maps for React JS Application
My react folder structure is as below
I've not used the create-react-app version. I tried using GENERATE_SOURCEMAP=false. But It didn't work.
Where can I find the .map files. How can I delete those ...
- 1,775
97
votes
2
answers
3k
views
Sourcemaps off by one line in Chrome, with Ruby on Rails, Webpack, and React JS
I'm having an issue where the sourcemaps generated by Webpack using the inline-source-map configuration setting are off by one line when I use the Chrome devtools debugger.
Webpack is set up inside a ...
- 1,081
82
votes
2
answers
14k
views
Performance impact of using css / javascript source-maps in production?
Should source-maps be used in production environment? Do they provide any benefits other than debugging?
Do they impact app load time due to the additional server round-trips? Are browsers smart ...
- 1,666
80
votes
2
answers
35k
views
Source maps files in production - Is it safe? [closed]
I'm using UglifyJS to minify and uglify my sources, and Sentry to report errors from my production environment.
In order to get errors from Sentry, in a readable manner, I need to add source-map
Is ...
- 2,039
75
votes
1
answer
28k
views
What MIME type should I use for JavaScript source-map files?
I want to add source maps to my site, but I'd like to exercise some control over how they're served. What is an appropriate MIME type to use for them?
Some data
The content itself is JavaScript, but ...
- 64.7k
74
votes
6
answers
50k
views
file is being assigned a //# sourceMappingURL but already has one
I just notice Firefox console outputs the following error for every single .js/.coffee file in my project (even the packages).
-file- is being assigned a //# sourceMappingURL, but already has one
...
- 11.2k
60
votes
5
answers
23k
views
Less/Sass debugging in Chrome Dev Tools/Firebug [closed]
How do you guys do maintenance on CSS built with Less/Sass?
One of the things I like about Dev Tools/Firebug is the ability to see the line number of a css styling. Is there a good way to do this ...
- 2,369
51
votes
2
answers
45k
views
Debugging typescript with source maps and webpack
I have project written in Typescript and I want to be able to debug it (either in Chrome Dev Tools or in Intellij).
At first I saw that Typescript's import functionality was not supported. So I ...
- 4,447
50
votes
3
answers
22k
views
Sourcemaps are detected in chrome but original source is not loaded, using webpack-2
When running an application that is built using webpack 2, sourcemaps are detected in chrome but original source is not loaded.
I'm using webpack beta21.
These files used to be detected automatically,...
- 7,415
49
votes
3
answers
3k
views
Breakpoint debugging minfied/mangled/compiled variables
Working on building JavaScript sourcemaps into my workflow and I've been looking for some documentation on a particular part of debugging source maps. In the picture below I'm running compressed ...
- 6,627
48
votes
1
answer
15k
views
When do browsers download sourcemaps?
When do browsers download the sourcemap for a minified file?
I am struggling to find documentation for any browser on if/when they download a minified file's sourcemap (an external file ending in a ....
- 3,003
45
votes
4
answers
31k
views
How to add sourcemap in React Native for Production?
I received error log like the following while the app crashed:
Fatal Exception: com.facebook.react.modules.core.JavascriptException:
onSelect index.android.bundle:20:7148 onPress
index.android....
- 1,872
45
votes
3
answers
30k
views
Load separate sourcemap file in chrome dev tools
Is it possible to load an external source-map file (JSON), not included in the minified JS file used on a website?
So far the only ways I know of to include a source-map for a particular js file is ...
- 1,891
45
votes
3
answers
67k
views
How to generate sourcemaps in create react app?
I'm wondering how to generate source maps in create-react-app? are they done implicitly? and do they live in the build folder
I've read quite a lot about them being generated with webpack but my app ...
- 7,241
44
votes
3
answers
2k
views
Is there an equivalent to Chrome's DevTools 'workspaces' in Firefox?
As in title: Is there an equivalent to Chrome's DevTools 'workspaces' in Firefox?
If not - how else can I work with source maps if my source js and scss files are outside webroot? Can I save changes ...
- 1,194
43
votes
13
answers
34k
views
Why am I suddenly getting "Could not read source map" in VSCode using Angular with NodeJS 17 and above?
I suddenly can't debug my Angular Application. Not quite sure what I did. It might have happen after I updated node.js
Angular: 13.1.1
NodeJS: 18.1.0
VSCode: 1.67.1
Launch.json
"configurations&...
- 3,471
40
votes
6
answers
41k
views
Source Maps not working with Webpack
I'm pretty new to webpack and having some trouble configuring it to produce the necessary source maps. In the devtools it says
Source Map detected
but it shows the bundle and not the original ...
- 559
38
votes
11
answers
89k
views
Webpack Module Warning: Failed to parse source map from "data" URL
I'm receiving a bummer warning and have been unable to find an available solution:
WARNING in ../lensing/dist/main.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to ...
- 669
34
votes
2
answers
18k
views
Grunt concat + uglify with sourcemaps
I use concat to merge JS files into one file and uglify to minimize the JavaScript. How can I create a sourcemaps file that uses the source JS files?
My current gruntfile:
concat: {
options: {
...
- 393
32
votes
2
answers
10k
views
Gulp + browserify + 6to5 + source maps
I'm trying to write a gulp task allowing me to use modules in JS (CommonJS is fine), using browserify + 6to5. I also want source mapping to work.
So:
1. I write modules using ES6 syntax.
2. 6to5 ...
user1816877
30
votes
1
answer
13k
views
Should I deploy sourcemaps to production?
I'm deploying my website - a static site built in GatsbyJS - and my sourcemaps are by far my largest files. I have 3 sourcemap files that are ~ 3MB. Overall they make up maybe 70% of my build.
Should ...
- 553
30
votes
6
answers
10k
views
AngularJS - Stack trace ignoring source map
I've written an AngularJS app but it's proving a bit of a nightmare to debug. I'm using Grunt + uglify to concatenate and minify my application code. It also creates a source map alongside the ...
- 1,023
30
votes
1
answer
3k
views
Source maps in Ruby on Rails through sprockets
I'd like to add source map support on a rails 3.2 application I am working on. As far as I know, generating source maps is not supported by Sprockets and from its github page it looks like the feature ...
- 1,072
30
votes
2
answers
7k
views
Vue CLI sourcemaps to style part of vue component file
I'm playing with Vue CLI project. I have configured startup project, set some development changes like those:
package.json
"dependencies": {
"bootstrap": "^4.3.1",
"core-js": "^3.0.1",
"...
- 1,525
29
votes
1
answer
46k
views
Google Chrome "Failed parsing SourceMap" : css.map (Web Essential)
Visual Studio 2013 UP5 + Web Essential's (v. 2.6.36) generated css.map files are invalid in "Google Chrome", however it is valid in "Firefox". Due to this it became impossible to debug less files in ...
- 2,411
29
votes
5
answers
7k
views
Combine source maps of two compilation steps
I've got a two-step compilation process for my web application. Firstly, I compile CoffeeScript files into JavaScript files [1]. Then the JavaScript files (both ones that come from CoffeeScript, and ...
- 41.5k
28
votes
1
answer
13k
views
How do I enable source map support in Firebug?
I've been using Chrome for a good while now, and you have to explicitly enable souce map support in the options.
I'm testing something in Firefox now with Firebug, but I'm not seeing my original ...
- 59.2k
27
votes
4
answers
26k
views
How to use sourcemaps to restore the original file?
I have a file that has been transpiled from ES6 to ES5 using Babel. I have sourcemap. I am assuming I can restore the original file (the way it looked when written in ES6) using these resources.
How ...
- 71.3k
27
votes
1
answer
7k
views
My source-mapped breakpoints aren't working correctly in Google Chrome
I have created a concatenated, minified file through the Node.js wrapper for Google Closure Compiler. When I open the Developer Tools in Google Chrome, both the source map and the mapped files all ...
- 9,656
27
votes
1
answer
10k
views
How to use source map on the JS stacktrace?
When I have an error on a JS code, I have this kind of stacktrace :
Error while processing route: admin.subscriptions/edit The adapter operation was aborted Error
at n.i (http://test.com/assets/...
- 7,192
26
votes
5
answers
17k
views
Chrome not loading CSS source maps?
Until recently, my Chrome browser was loading CSS source map files correctly. Now, it is not.
The setting is on:
And the CSS files have a source mapping tag at the bottom:
/*# sourceMappingURL=Home....
- 7,058
24
votes
4
answers
3k
views
How to generate sourcemaps using Angular CLI and upload them to Sentry?
There are two ways to set up sourcemaps: having them hosted on the site and referenced in the bundled files or uploading them directly to a service like sentry. I'm trying to accomplish the latter. ...
- 967
23
votes
4
answers
15k
views
How to get Chrome to reload source maps?
I am on Chrome Dev 27, and in the Dev Tools settings checked Disable cache. When I reload a page, Chrome properly reloads all the resources used by map page, including the .js files. However, it doesn'...
- 31.3k
23
votes
1
answer
3k
views
VueJS Stack Traces Do Not Show Where Errors Occur
Context
Source Code
I am using VueJS with webpack in a project.
I am not using the vue-loader plugin or .vue files.
My project is structured like a standard Javascript webpack project which ...
- 4,178
23
votes
2
answers
615
views
Why are JS sourcemaps typically at token granularity?
JavaScripts source maps seem to typically be at no finer than token granularity.
As an example, identity-map uses token granularity.
I know I've seen other examples, but can't remember where.
Why ...
- 14.9k
22
votes
3
answers
6k
views
Source map is not visible at Chrome network tab
Before Google Chrome update I saw source map files at Chrome Devtools on Network tab. Now, after update to version 43.0.2357.134 m I don't see them.
Maybe my code is wrong? Or it's done intentionally ...
- 8,743
22
votes
5
answers
8k
views
Keep original typescript source maps after using browserify
Background: I am compiling 2 dependent TypeScript files to js, which produces also source maps (one source map per file) using tsc 1.0
I'm using -m commonjs and then use browserify to generate a ...
- 45.2k
22
votes
3
answers
4k
views
How to set a breakpoint at a lambda call in Google Chrome DevTools?
I use Babel and Google Chrome Developer Tools with JavaScript source maps enabled. Given this code
function myFunc(elements) {
return elements
.map(element => element.value)
.filter(...
- 4,914
22
votes
1
answer
13k
views
How to combine TypeScript code and JS libraries into one file with source maps?
I can successfully compile my TypeScript project into a single JS file with source maps using something like this:
tsc --sourcemap --out app.js app.ts
I can also successfully minify that output ...
- 9,491
22
votes
2
answers
2k
views
Is there SourceMaps for HTML?
In Google Chrome there are already sourcemaps for JS and CSS, CoffeeScript etc., and Paul Irish just demostrated SASS using sourcemaps.
It is a a technique to map development source files to the ...
- 4,634
21
votes
4
answers
10k
views
how can I enable a source map for coffeescript?
I recently discovered the existence of source maps in chrome via source debugging in the haxe language. It allows to debug generated javascript inside the chrome browser while seeing the bug reason ...
- 22.2k
21
votes
1
answer
17k
views
How to add JS source map into Chrome devtools?
My deployed JavaScript application raises an exception. The Javascript code is obfuscated. I would like to know, which line in original source code raises an exception. Source maps are not deployed, ...
- 438
21
votes
1
answer
3k
views
Is there a command line flag to disable JavaScript source maps for Chrome?
Edit: I opened a new issue with Chromium.
Our project uses TypeScript compiled to JavaScript. When debugging automated unit tests in Karma, I want to disable JavaScript source maps and stick to ...
- 3,710
20
votes
3
answers
10k
views
Could not load content for webpack source file in Chrome sources tab
I'm using webpack v4.16.2 as my bundle tool, and set devtool to 'source-map'. I'm trying to debug the source file through the Chrome sources tab. However, when I click the source file lie down webpack:...
- 2,898