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
13
votes
5 answers

Preserve original sourcemap with Browserify

Suppose I have a module whose source code is not ECMA 5 (e.g. it's Coffescript or Typescript or whatever) and is distributed in compiled form with a source map. How can I include this source map in a Browserify bundle? For example imagine a project…
Jamie Treworgy
  • 23,934
  • 8
  • 76
  • 119
13
votes
2 answers

How to configure sourceMaps for LESS using Grunt?

I'm using grunt 0.4.2 and grunt-contrib-less 0.9.0. I want my LESS to be compiled into CSS with support for source maps. My LESS files are in public/less, and the main one is called main.less. The compiling of public/less/main.less into…
Ryan
  • 22,332
  • 31
  • 176
  • 357
13
votes
2 answers

Ruby on Rails Less source maps and the asset pipeline?

I'm currently using the less-rails gem in a Ruby on Rails application that I'm building. I would like some way to debug my Less css files in Chrome by way of source maps (https://developers.google.com/chrome-developer-tools/docs/css-preprocessors)…
Mark Murphy
  • 2,834
  • 1
  • 31
  • 29
13
votes
3 answers

sass error in rails app on heroku: can't dump anonymous class

I'm getting the following warnings from heroku after trying to enable source maps for chrome http://blog.vhyza.eu/blog/2013/09/22/debugging-rails-4-coffeescript-and-sass-source-files-in-google-chrome/ What do they indicate and what, if anything,…
Harry Moreno
  • 10,231
  • 7
  • 64
  • 116
13
votes
2 answers

Will the source mapping in Google Chrome push to Error.stack

Within Google Chrome, I was wondering if stack traces will, in the future, provide mapping support. Currently, using source maps, throwing an error will provide the line number link to my TypeScript files, however... When calling the Error.stack, it…
Aedaeum
  • 305
  • 1
  • 11
13
votes
2 answers

Source mapping in IE. //@ sourceURL

In IE doesn't work //@ sourceURL. appLoader.loadScriptContent(doc, scriptData.data + "//@ sourceURL=" + scriptData.url ); In Another browsers it's OK. How can I change this code for working in IE ?
Geray Suinov
  • 3,521
  • 3
  • 16
  • 19
12
votes
1 answer

Chrome Extension: Not loading source-maps

I am not able to load sourcemap in Chrome Extension for some reason. The folder which is being loaded for Chrome Extension has .map just next to .js file. With the .js file having the line //# sourceMappingURL=1.9215106f1980d05d2b4c.js.map…
Shyamal Parikh
  • 2,988
  • 4
  • 37
  • 78
12
votes
2 answers

How to see Rust source code when debugging WebAssembly in a browser?

I am testing a simple todo app in Rust using the YEW framework. When I get an error, the browser console (Devmode) shows JavaScript or assembler (I tried both Chrome and Firefox). How can I get the Rust code? Do I have to setup source maps…
dilvan
  • 2,109
  • 2
  • 20
  • 32
12
votes
4 answers

Shift the offset during eval (using sourcemap)

I'm loading a script from a file, and I'm using eval() to generate a Javascript code like this: var code = fs.readFileSync('myfile'); var shiftedCode= 'function(param) {' + code + '}\n'+ '//# sourceURL=myfile'; eval(shiftedCode) The problem is when…
Alphapage
  • 901
  • 1
  • 6
  • 29
12
votes
1 answer

Which is the base url of sourcemappingurl: relative from html or js?

Suppose that there is a js file with source-map in subdirectory of a html file. index.html (uses js/myjs.js) js/myjs.js js/myjs.js.map then which is the sourceMappingURL comment of myjs.js ? //# sourceMappingURL=myjs.js.map or //#…
hoge1e3
  • 802
  • 5
  • 15
12
votes
2 answers

Webpack use existing source map from previous build step

I have .ts files compiled to .js and .js.map files by my editor and am bundling the .js files using webpack. (I don't want webpack to be responsible for compiling the .ts because then the errors won't appear properly in the editor.) If I feed the…
Jesse
  • 6,725
  • 5
  • 40
  • 45
12
votes
1 answer

Deobfuscation of minified JS with source maps

Can source maps help to deobfuscate the code that was previously minified with Closure/Uglifyjs? Are there real obstacles in how source maps work, or is it not there just because nobody cared about it? I'm not quite sure if it may work in a similar…
Estus Flask
  • 206,104
  • 70
  • 425
  • 565
12
votes
1 answer

How do I toggle source mapping in Safari 7?

The Safari 7 inspector is marvelously line-mapping compiled javascript back to the coffeescript it came from. There are times, though, when I want to interact directly with the compiled javascript in inspector. How do I toggle source mapping off so…
jpadvo
  • 6,031
  • 3
  • 26
  • 30
11
votes
3 answers

Show file names instead of chunks in chrome developer console

When there is an error in my react 17 application, the chrome developer console shows errors to chunks file paths instead of the actual source file containing the component with error. Is it possible to show the real files path instead of chunks? I…
zdarsky.peter
  • 6,188
  • 9
  • 39
  • 60
11
votes
1 answer

Chrome DevTools: local overrides for JS files from Webpack Source Map

I am not totally happy with the usability of video player on coursera.org (not my own website) and want to change something using the local overrides for my own convenience. I successfully located the JS file to be changed and enabled local…
Gang Fang
  • 787
  • 7
  • 14
1 2 3
…
73 74