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

How to add JS source map into Chrome devtools?

My deployed JavaScript application raises an exception. The Javascript code is obfuscated. I would like to know, which line in original source code raises an exception. Source maps are not deployed, so Chrome Devtools can't connect them. I may have…
Andrii Skaliuk
  • 428
  • 1
  • 6
  • 14
21
votes
4 answers

how can I enable a source map for coffeescript?

I recently discovered the existence of source maps in chrome via source debugging in the haxe language. It allows to debug generated javascript inside the chrome browser while seeing the bug reason in the original source code. Has anyone written a…
Jerome WAGNER
  • 21,986
  • 8
  • 62
  • 77
20
votes
3 answers

Could not load content for webpack source file in Chrome sources tab

I'm using webpack v4.16.2 as my bundle tool, and set devtool to 'source-map'. I'm trying to debug the source file through the Chrome sources tab. However, when I click the source file lie down webpack:// directory, an error occurred: I'm not using…
L_K
  • 2,838
  • 2
  • 16
  • 36
20
votes
1 answer

Is there a command line flag to disable JavaScript source maps for Chrome?

Edit: I opened a new issue with Chromium. Our project uses TypeScript compiled to JavaScript. When debugging automated unit tests in Karma, I want to disable JavaScript source maps and stick to debugging the compiled code. I know how to do this…
stealththeninja
  • 3,576
  • 1
  • 26
  • 44
19
votes
3 answers

How to set a breakpoint at a lambda call in Google Chrome DevTools?

I use Babel and Google Chrome Developer Tools with JavaScript source maps enabled. Given this code function myFunc(elements) { return elements .map(element => element.value) .filter(value => value >= 0); } how can I pause execution at…
maiermic
  • 4,764
  • 6
  • 38
  • 77
18
votes
2 answers

WebPack sourcemaps confusing (duplicated files)

I decided to try out WebPack on a new project I'm spinning up today and I'm getting really strange behavior from the sourcemaps. I can't find anything about it in the documentation, nor can I find anyone else having this issue when skimming…
stevendesu
  • 15,753
  • 22
  • 105
  • 182
18
votes
6 answers

Chrome showing blank TypeScript file

I am setting up a new TypeScript project in visual studio 2013. I have the option on my VS project to generate source maps checked. I have the option to specify root directory for typescript files and specify root directory for sourcemap files…
Eric
  • 718
  • 1
  • 9
  • 22
18
votes
3 answers

javascript source map : keeping map file local only to debug production javascript

I would like to debug production website, but I don't want to upload the map file on the server (for privacy reason, because it is public right ?). Is it possible ?
Laurent Debricon
  • 4,307
  • 2
  • 24
  • 26
17
votes
3 answers

How to debug Typescript code in Visual Studio Code with ts-node-dev and correct line numbers

I have a Typescript project that is launched as follows: ts-node-dev --preserve-symlinks --inspect=0.0.0.0 -- src/server.ts I can debug it with Visual Studio Code, but the debugger breaks at the wrong lines. The only reasonable explanation I can…
303
  • 888
  • 1
  • 11
  • 31
17
votes
2 answers

source-map-explorer error: Check that you are using the correct source map

I have a JavaScript project that uses Webpack 4 with source maps: mode: 'development', entry: { app: './src/app.js' }, output: { filename: 'app.[contenthash].js', path: outputPath, }, devtool: 'sourcemap', externals, .... It generates 2 JS…
Gambit2007
  • 3,260
  • 13
  • 46
  • 86
17
votes
1 answer

Unbundle a webpack bundle.js with the SourceMap

I want to reverse or unbundle a bundle.js. Currently I am loading the bundle.js in my browser (Chrome) Chrome detects the sourcemap and shows me a nice structure of the full application based on the bundle. The application is bundled using webpack…
Koen
  • 858
  • 2
  • 7
  • 22
17
votes
4 answers

How to change `sourceMappingURL` by using webpack

My production webpack configuration is: { output: { publicPath: "https://cdn.example.com/sub-directory/", filename: '[name]-[chunkhash].min.js' }, devtool: 'source-map', plugins: [ new webpack.optimize.UglifyJsPlugin() …
Ky6uk
  • 1,067
  • 3
  • 16
  • 26
17
votes
5 answers

Debug compiled ES6 nodejs app in WebStorm

I want to debug a node app that runs from babel compiled ES6 files. I have my ES6 source in an src folder and the babel ES5 equivalent in a build folder. Project root | | build | > ES5 Compiled files | | src | > ES6 Source files My goal: Place…
ngasull
  • 4,206
  • 1
  • 22
  • 36
16
votes
3 answers

Compile LESS files with source maps

How can I compile a LESS file to output a source map file (.css.map) in addition to a CSS file? Is there a way to do it on both command line (NodeJS's lessc) and on any GUI-based programs?
rink.attendant.6
  • 44,500
  • 61
  • 101
  • 156
15
votes
1 answer

Can I enable sourcemaps in a chrome extension?

I'm doing some test development and creating a Chrome extension using Svelte and ParcelJS and would like to see the sourcemaps in chrome dev tools. When looking at any page however I can only see the bundled code see this error: DevTools failed to…
Jason Goemaat
  • 28,692
  • 15
  • 86
  • 113
1 2 3
…
73 74