CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-devtoolssource-maps
Björn Morén
Björn Morén

Reputation: 773

Google Chrome: how to find original line from minified line using a source map?

I'm using the Closure Compiler to minify my JS code, and it also generates a source map file. I can open my site in Chrome and load the source map to see the original source code. I can set a breakpoint in the original source code and step through the code, so far so good.

How do I see what a specific line/column of the minified code maps to in the original code, and vice versa, without using breakpoints?

Let's say I get a bug report "Cannot set property 'b' of null, line 512, column 315". I can find the section in the minified code, it is "Ba.b=!0;" How can I use Chrome to find out where in my original source code that is from?

Upvotes: 2

Views: 1104

Answers (2)

Liam
Liam

Reputation: 20950

I can't find a way to do that in Chrome.

In Firefox you can right-click on a point in the generated code and select "Jump to original location".

enter image description here

Another option is to use a web-based visualization tool like this one: https://evanw.github.io/source-map-visualization/

Upvotes: 1

punjabi
punjabi

Reputation: 49

cant you reproduce the error with either sourcemap files or running the unminified file?

Upvotes: 1

Related Questions