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

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 external ones, like produced from AngularJS…
liori
  • 40,917
  • 13
  • 78
  • 105
28
votes
1 answer

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 source files - just the generated bundle. Is there…
B T
  • 57,525
  • 34
  • 189
  • 207
27
votes
1 answer

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…
Dougui
  • 7,142
  • 7
  • 52
  • 87
26
votes
1 answer

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 I deploy them to my production server? Are…
Paul N
  • 513
  • 1
  • 5
  • 11
26
votes
5 answers

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.cshtml.css.map */ But the Network tab and…
Glen Little
  • 6,951
  • 4
  • 46
  • 68
26
votes
1 answer

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 load appropriately. A problem I'm having is that…
Ian Hunter
  • 9,466
  • 12
  • 61
  • 77
24
votes
4 answers

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. The problem is that there seems to be no way to…
Nikola Jankovic
  • 947
  • 1
  • 13
  • 23
24
votes
4 answers

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 is it done? Is there a CLI tool to do this?
Gajus
  • 69,002
  • 70
  • 275
  • 438
23
votes
2 answers

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 don't we use AST-node based granularity instead? That…
Max Heiber
  • 14,346
  • 12
  • 59
  • 97
23
votes
1 answer

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 imports vue. My webpack configuration has the…
Noah Huppert
  • 4,028
  • 6
  • 36
  • 58
22
votes
3 answers

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 to hide those source maps?
Viacheslav Kondratiuk
  • 8,493
  • 9
  • 49
  • 81
22
votes
1 answer

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 using UglifyJS, while keeping source maps…
dumbmatter
  • 9,351
  • 7
  • 41
  • 80
22
votes
5 answers

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 single bundle.js However I noticed that I get the…
Eran Medan
  • 44,555
  • 61
  • 184
  • 276
22
votes
2 answers

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 compiled results in the browser to allow navigating…
jiyinyiyong
  • 4,586
  • 7
  • 45
  • 88
22
votes
4 answers

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't automatically reload the corresponding source…
avernet
  • 30,895
  • 44
  • 126
  • 163
1 2
3
…
73 74