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

Chrome 53 Auto-reload generated CSS option not available (Windows 7)

How can I get chrome to auto-reload generated css? I've seen lots of sites advising me to check the "Auto-reload generated CSS" checkbox in dev tools settings, eg Chrome's "Auto-Reload Generated CSS" not reloading page when SASS recompiles CSS. But…
Simon H
  • 508
  • 1
  • 5
  • 18
0
votes
1 answer

Unable to find source files

I've started working on an existing website at work that uses Sass and auto-prefixer with Grunt. I'm not 100% familiar with the files yet, but I don't want to change the structure to avoid breaking anything. The problem I'm having is that no matter…
Mario Parra
  • 1,504
  • 3
  • 21
  • 46
0
votes
1 answer

Reading HTML from source map

I'm trying to get both Typescript controllers and the connected html files from a IIS 7 database, but the code has been minimized and divided into .js and .js.min files. Using chrome source, I've managed to find and use the reconstructed .ts files,…
Sam Thadon
  • 11
  • 5
0
votes
1 answer

Why does webpack say it has generated a source map when it hasn't?

In the screenshot below you can see that our website loads two main .js files - app & lib. Our .js files are built by webpack and outputted for production without //# sourceMappingURL=/path/to/script.js at the bottom of them. Nor is there a header…
Richard
  • 14,798
  • 21
  • 70
  • 103
0
votes
1 answer

Getting proper sourcemaps (gulp sass + cleanCss + prefixer + uncss)

What is best way to chain gulp for compiling sass into clean css (prefixed, un-CSSed and minified). Following example creates sourcemaps, but they are pointing to wrong line numbers in source files when viewed in browser inspector. var plugins =…
ramin
  • 157
  • 15
0
votes
1 answer

Append comment to all source maps with webpack

The answer here using BannerPlugin works for my bundle.js and css files but I also have source maps available in production that I would also like to comment. Is there a way to include the BannerPlugin along with the…
karl.r
  • 961
  • 1
  • 11
  • 28
0
votes
0 answers

decoding backtrace from compressed js

I have some compressed js & browser-generated js backtraces (new Error("").stack converted to strings by a client and sent to my servers ): I'd like to make this backtrace more readable by converting its compressed line/column numbers to…
mathieu
  • 2,954
  • 2
  • 20
  • 31
0
votes
1 answer

What is the best way to "compile" HTML templates in production?

i'm developing my first Angular2 app and i'm using this folders structure: components component1 home.component.ts home.component.html home.component.scss I'm using Gulp to run tasks for building the app. The final…
smartmouse
  • 13,912
  • 34
  • 100
  • 166
0
votes
1 answer

sourcemaps not working for ionic 2

I'm using TypeScript with Ionic 2, but my sourcemaps is not working. I suppose something is wrong either with my TypeScript gulp task, but I cannot find the issue. Here is my gulpfile.js var gulp = require("gulp"), gulpWatch =…
DAG
  • 2,460
  • 5
  • 33
  • 61
0
votes
0 answers

How can i prevent webpack from adding source code in the sourcemap?

How can i prevent webpack from adding source code in the sourcemap? I would like to be able to use a browser (for eg chrome) to specify the location of source files and souremap should just contain mapping from compiled code to source code.
0
votes
1 answer

Sourcemaps with require.js

I am using grunt-contrib-requirejs to munge my files into a single file and generate a sourcemap. The sourcemap seems to be valid but is 6 lines off in the debuggers in both Chrome and Firefox. I have googled quite a bit but can't find any reasons…
dtsn
  • 1,077
  • 1
  • 10
  • 17
0
votes
0 answers

why my less source maps don't work?

I use the gulp-less compiler with gulp-sourcemaps write the source maps file. but it don't work in my chrome dev tool, I can't see the content of less. only css file. it's my gulp file: var gulp = require('gulp'); var less =…
hellolibo
  • 61
  • 4
0
votes
0 answers

Can I use external SourceMap files with different extensions

Will a SourceMap with a file extension that's not .map (maybe .map.js instead) work within a browser when linked? //# sourceMappingURL=../maps/runfirst.js.map.js and //# sourceMappingURL=../maps/styles.css.map.css I'm in the rather unfortunate…
Nicekiwi
  • 4,567
  • 11
  • 49
  • 88
0
votes
1 answer

How can I debug evaled JavaScript within AngularJS?

I have some arbitrary javascript code that is run via the following method: download it onto client browser via ajax call pass resulting code string into javascript eval function. Note: I cannot download/run the code by adding its file URL to a…
Ozymandias
  • 2,533
  • 29
  • 33
0
votes
1 answer

Taco stops in the middle of livereload

I recently set up my project with a gulp system to compile and minify (with sourcemaps) jade, stylus, and es6 from a separate /src folder into /www. I am endeavoring to use TACO for livereload, but whenever one of these files is changed (I believe…
UnderSampled
  • 131
  • 6