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

Using babel, cannot set breakpoints in ES6 generators

In a typical react app, using babel with the presets es2015, react and stage-2 and with sourcemaps enabled, setting the breakpoint in a generator function, the breakpoint will move automatically to somewhere else. .babelrc { "presets": ["es2015",…
0
votes
0 answers

Setting up remote URL mappings in package.json in order to have third-party libraries source code available whilst debugging

I currently have no support for debugging third-party libraries; that is to say I cannot debug the source code for the third-party libraries although I can debug my application's own source code. Can someone please advise how to configure my…
balteo
  • 23,602
  • 63
  • 219
  • 412
0
votes
0 answers

Gulp LESS + autoprefix + sourcemaps frustration

I have a task like the following: var gulp = require('gulp'), plugins = require('gulp-load-plugins')({ camelize: true }); gulp.task('styles-compile', function() { return gulp.src(['less/site.less', 'less/special-*.less', …
Chris O'Kelly
  • 1,863
  • 2
  • 18
  • 35
0
votes
1 answer

Chrome doesn't recognize inlined sources (source map)

Hello people of the internet, I'm writing typescript-code and compiling it to javascript. I activated the --inlineSourceMap and --inlineSources flags. The into the javascript files embedded base64-strings looks decoded like this: { "version":3, …
0
votes
2 answers

Make SCSS sourcemaps work in Webpack 2 using extract-text-webpack-plugin?

I'm starting to configure my first Webpack v2 task manager. This is the first time I'm using Webpack. I'm using extract-text-webpack-plugin to have an external CSS file. My problem is that I don't know how to setup sourcemaps for my SCSS file. Is…
user2475614
  • 221
  • 1
  • 2
  • 5
0
votes
1 answer

How to build sourcemaps from minifyed css?

I have the project: project/ ├── css/ │ ├── map/ | │ └── style.min.css.map │ └── style.min.css └── style/ ├── _head.sass ├── _nav.sass ├── _content.sass ├── _foot.sass └── style.sass In devtools this sourcemap always…
kizoso
  • 1,216
  • 2
  • 15
  • 30
0
votes
0 answers

Elixir sourcemaps wrong file app.css[sm] bug

With elixir, I compile my stylus files. But I have a problem with generating sourcemaps. In the chrome console, it gives me the right information for the basic files (eg, for reset css). But afterwards, it put me all styles in my app.css file…
Jeremy
  • 1,756
  • 3
  • 21
  • 45
0
votes
0 answers

Why does Debugging of TypeScript in VS 2015 makes a dynamic file?

I am currently working on a project with AngularJS, ASP.NET and TypeScript. The problem is to get TypeScript debugging working with the original file in VS 2015. Source-maps are created and loaded from the Browser, and the breakpoint hits, but not…
0
votes
0 answers

Beautify Javascript after Babel transforms and before Webpack generates sourcemaps

I use async/await extensively in my codebase. However, Webpack's sourcemaps don't work well with async/await, or generators in general. Babel transpiles async/await by generating multiple lines of code separated by semi-colons, but not newlines.…
Leo Jiang
  • 24,497
  • 49
  • 154
  • 284
0
votes
1 answer

My LESS sourceMap file is missing the "file" when run through grunt

When I run lessc --source-map=styles.map assets/less/00_style.less dest/assets/prod.css in the command line, everything is working. The styles.map file ends in: ...AV2rEF;EAAiB,aAAA","file":"dest/assets/prod.css"} However, when I run grunt less,…
thugsb
  • 22,856
  • 6
  • 30
  • 44
0
votes
1 answer

Visual Studio 2015 removing Typescript SourceMapping

I'm using TypeScript in my Visual Studio Project. There are the following files: Example.ts Example.js.map Example.js To Debug the TypeScript code in Chrome it is necessary to have this as the last line in the .js file //#…
Daniel R
  • 1,122
  • 8
  • 16
0
votes
1 answer

sourceMappingURL returns full path. How to switch it off?

I have my own Angular 2 library and trying to compile it with Angular2 official ngc compiler. Everything works fine but when I was inspecting code generated, I found sourceMappingURL returns full path. As I am going to ship it I should not want to…
tom10271
  • 4,222
  • 5
  • 33
  • 62
0
votes
0 answers

babel source maps - cant debug properly

i am working on a university project and am writing the backend with node js transpiled with babel in order to use async/await i am generating source maps in order to debug properly but its doing some pretty shitty job for example - i cant put a…
0
votes
1 answer

How to make sourceMap option in tsconfig.json dynamic via webpack?

I am using webpack to compile my typescript related .tsx files that also make use of jsx plus ES2015/stage-0 syntax. My webpack.config.js file is as follows: var PATHS = { "build": path.join(__dirname, 'build'), "myModule1":…
Faisal Mq
  • 5,036
  • 4
  • 35
  • 39
0
votes
1 answer

React-native sourcemaps not working using chrome?

For some reason I cannot use sourcemaps to view my react-native project files in the chrome debugger. Chrome immediately logs out: Failed to parse SourceMap: http://localhost:8081/index.ios.map?platform=ios&dev=true&minify=false&hot=true I don't…
James111
  • 15,378
  • 15
  • 78
  • 121