Stack Overflow
Stack Overflow

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.

JavaScript code used on websites has often gone through various stages of automated transformation (eg. minification, optimization, etc.), or have even been generated from a non-JavaScript source language targeting JavaScript as the runtime environment. These automated translations often make the final code much more difficult to understand and debug using development tools inside the browser.

Source maps solve the problem by giving the JavaScript debugger enough additional information to effectively translate locations and symbols between the processed JavaScript code and the original input file used to create it.

JavaScript source maps is a technology proposal from Google and Mozilla, and currently developed inside the Closure Compiler, WebKit, and Mozilla's DevTools.

Because source maps are not yet officially released and documented, good information about them is somewhat scarce. The following articles give an overview of the current state of source maps:

1111 questions
49
votes
3 answers

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 Javascript code, but through the magic of source maps…
Dan-Nolan
  • 6,594
  • 4
  • 27
  • 32
48
votes
1 answer

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 .map extension, like scriptname.min.js.map). I am…
Ben Rondeau
  • 2,983
  • 1
  • 15
  • 21
45
votes
4 answers

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.bundle:20:2435 But it's not really helpful for me…
noooooooob
  • 1,872
  • 3
  • 21
  • 27
42
votes
3 answers

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 is not using it, so I was wondering how I do this…
Red Baron
  • 7,181
  • 10
  • 39
  • 86
42
votes
2 answers

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 to either inline it, add a link in comments or set…
Greg
  • 1,851
  • 2
  • 19
  • 21
39
votes
6 answers

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 code: Here is my webpack.config.js: module.exports =…
Jbarget
  • 549
  • 1
  • 4
  • 15
39
votes
3 answers

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 directly to the filesystem?
Xander
  • 1,114
  • 2
  • 9
  • 18
38
votes
12 answers

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": [ { "type": "pwa-chrome", "request":…
Michael
  • 3,350
  • 2
  • 21
  • 35
35
votes
11 answers

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 parse source map from "data" URL:…
jared jessup
  • 629
  • 2
  • 7
  • 11
34
votes
2 answers

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: { // define a string to put between each file…
user3483982
  • 393
  • 1
  • 3
  • 6
32
votes
2 answers

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 transpiles these modules into CommonJS (or other)…
user1816877
30
votes
2 answers

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", "preload-it": "^1.2.2", …
l00k
  • 1,525
  • 1
  • 19
  • 29
30
votes
1 answer

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 is planned for 4.0. I am working with Sprockets…
erosenin
  • 1,052
  • 10
  • 22
30
votes
6 answers

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 minified JS file. The source map seems to work properly…
Tom Seldon
  • 1,023
  • 9
  • 10
29
votes
1 answer

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 google chrome. Currently, I am using Web…
Md. Alim Ul Karim
  • 2,401
  • 2
  • 27
  • 36
1
2
3
…
73 74