sokra / source-map-visualization

Just a simple hacky visualisation of SourceMaps
http://sokra.github.io/source-map-visualization
628 stars 77 forks source link

Doesn't work well for large files and minified fields #11

Closed fresheneesz closed 8 years ago

fresheneesz commented 9 years ago

First of all, I love this tool. But I'm trying to use this tool to view my webpack bundle to verify how its sourcemap is working in a specific part, and the three boxes can't be seen all at once. Not only that, but the minified bundle is only two incredibly long lines, so highlighting anything in any box basically shows me nothing.

I suggest the following: A. Make the boxes float side-by-side so you can always see all 3 boxes at the same time like they do in this viewer: http://sourcemapper.qfox.nl/ B. Make each box only the height of the page, so that you can see the whole box for each C. When you highlight a segment, scroll to the corresponding segements in the other two boxes

Is this doable?

sokra commented 9 years ago

Is this doable?

I think so... Do you want to do a PR?

fresheneesz commented 9 years ago

I feel like I could do a PR, but I don't have the time right now : / . Already have a couple other PRs on my plate I need to get to first.

sokra commented 9 years ago

but I don't have the time right now

I have the same problem...

paulirish commented 8 years ago

fwiw: I have work inside of https://github.com/sokra/source-map-visualization/pull/16 which partially fixes these concerns.

sokra commented 8 years ago

Made a few changes and it should be more performant and better readable now.

paulirish commented 8 years ago

Tried out a few more changes along these lines. 3 independently scrolling panes.

branch: https://github.com/paulirish/source-map-visualization/tree/applayout

demo: http://paulirish.github.io/source-map-visualization/#babel

image