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
11
votes
1 answer

"sourceMaps is null" in Firefox Developer Edition

In the debugging window of the developer console - I can see all my javascript resources listed, but in of them it just says sourceMaps is null. The resources I'm trying to fetch are some minified jquery, and unminified, but consolidated…
dwjohnston
  • 11,163
  • 32
  • 99
  • 194
11
votes
1 answer

Gulp-generated source maps don't work in Chrome

Apart from enabling source maps in Chrome, in my gulpfile.js I use errLogToConsole: true, sourceComments: 'map', sourceMap: 'sass' as arguments when calling sass based on this answer: gulp.task('sass', function() { return…
drake035
  • 3,955
  • 41
  • 119
  • 229
11
votes
1 answer

How can I specify a file source map after the page loads up?

I'm a big fan of source maps for javascript and SASS; however, I don't want to load source maps into production for a couple of reasons: the original source code is available and it's not a good use of bandwidth. But, sometimes, the need for…
antjanus
  • 987
  • 3
  • 15
  • 30
11
votes
3 answers

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' in Gulp + Babel + TypeScript + Source Maps

I'm trying to compile from .ts to .min.js as follows: TS --> ES6 ---> ES5 ---> .min.js + .map Before I was just doing the following and everything was working fine: TS ---> ES5 ---> .min.js + .map I want to be able to use source maps. My…
Remo H. Jansen
  • 23,172
  • 11
  • 70
  • 93
11
votes
2 answers

Gulp sourcemap with less/concat/autoprefixer/minifycss?

Is it possible to generate a sourcemap with all these transformations? gulp.task('styles', function() { return gulp.src(source.styles) .pipe(plumber()) .pipe(gulpif(/\.less$/, plumber().pipe(less({ strictMath: true, …
mpen
  • 272,448
  • 266
  • 850
  • 1,236
11
votes
2 answers

How to configure grunt-contrib-less to generate source maps compatible with Chrome DevTools?

The question title pretty much says it all. I don't know how to configure the grunt-contrib-less task that now supports source maps. My expected result is to have Chrome DevTools CSS inspector to point to the Less rules. If possible, it would be…
Alejandro García Iglesias
  • 16,222
  • 11
  • 51
  • 64
11
votes
2 answers

Compiling Erlang To Javascript Via Core Erlang

So started making progress on LuvvieScript and then it all kicked off a bit on Twitter... https://twitter.com/gordonguthrie/status/389659700741943296 Anthony Ramine https://twitter.com/nokusu made the point that I was doing it wrong and I should be…
Gordon Guthrie
  • 6,252
  • 2
  • 27
  • 52
11
votes
3 answers

How to debug LESS in Chrome?

It looks as though LESS debugging has come a decent distance since even a year ago, and I was wondering how many people have experience with debugging using developer tools in Chrome/Canary. I'm trying to ensure that when I'm debugging a file, the…
Duncan
  • 125
  • 1
  • 5
10
votes
1 answer

Processing source-maps of XXX.js took longer than YYY ms so we continued execution without waiting for all the breakpoints

[Edit] This actually happens on a newly created barebones React+Typescript template ViteJS app as well, with zero modifications. Putting a breakpoint in App.tsx makes the VS Code debugger startup unbearably slow. Original post follows: I'm trying…
Jaap Suter
  • 233
  • 3
  • 9
10
votes
3 answers

Content and Map of this Source is not available (only size() is supported) Angular 13

I have been working with angular project and have angular version is 13 and node is 16 versions. When i use command npm run start its throwing an error(compilation error). Pasted the error below Error: Content and Map of this Source is not available…
arj
  • 887
  • 1
  • 15
  • 37
10
votes
1 answer

Map JSON-pointer to the {line, column} in a text JSON file

I need to map a location in JSON (or JavaScript object) defined by JSON-pointer to the position in JSON text file as {line,column}. Is there any existing JavaScript library that would do it? Writing this code is going to be a bit tedious... For…
esp
  • 7,314
  • 6
  • 49
  • 79
10
votes
1 answer

Visual Studio Code breakpoints in typescript

Using Visual Studio Code, when I set a breakpoint in my .ts file, it is not hit. (And is not red when I debug). However, if I set a breakpoint in the compiled JS, then it swaps me to the ts file as I step through the code. And then any breakpoints…
Vaccano
  • 78,325
  • 149
  • 468
  • 850
10
votes
0 answers

Chrome breakpoints jump to different lines

I'm running Chrome 48.0 and lately when I try to place breakpoints in the developer console, sometimes they will refuse to be placed at certain lines and instead jump to another line instead. Almost like when you try to place a breakpoint on a line…
Andrew
  • 1,890
  • 3
  • 16
  • 35
10
votes
1 answer

NodeJS 5.x + Babel 6 async/await debugging

I'm having spotty debugging experiences when I try to debug code with async/await using transform-async-to-generator babel plugin ( although I've tried almost every other combination ). Essentially code with a await will skip to the end of the…
amcdnl
  • 8,470
  • 12
  • 63
  • 99
10
votes
1 answer

How to create a source map for WebPack?

My current webpack.config file module.exports = { entry: "./entry.js", output: { devtoolLineToLine: true, sourceMapFilename: "./bundle.js.map", pathinfo: true, path: __dirname, filename: "bundle.js" …
Leon Gaban
  • 36,509
  • 115
  • 332
  • 529
1 2 3
…
73 74