Django-compressor: Support for js source maps

Created on 4 Sep 2013  ·  20Comments  ·  Source: django-compressor/django-compressor

Source maps are a very nice tool for debugging something on compressed code using Chrome Dev Tools. There are lots of tools that generate them including Google closure that is already supported by django-compressor.

Here's some info: https://github.com/ryanseddon/source-map/wiki/Source-maps%3A-languages,-tools-and-other-info

feature

Most helpful comment

source maps are used by sentry too https://www.getsentry.com/docs/sourcemaps/

All 20 comments

I'm willing to implement it but I'd like to know if there's any interest about this feature.

So far I've been reading the code to get an idea of what is needed to accomplish this.

First, on the template tags side, there are at least two options to turn on source maps, a parameter for the compressor or a different compressor: {% compress js sourcemap %} or {% compress js-sourcemaps %}

Then, if source maps option is on, the compressor should check that all the hunks are files because you can't generate source maps for inline (I think, not completely sure).

Finally, maybe the trickiest part, a compressor backend that can handle a list of files and output the compressed js and the source map file is needed.

I'd love to get some feedback on this to know if I'm on track or I got everything wrong.

This may be possible with the existing toolchain. I've managed to get basic sourceMapURL support for CSS via SASS.

e.g. https://gist.github.com/Nagyman/6542739

This is very preliminary; some known limitations are mentioned in the comments.

I am interested. It would easy fast debugging staging code.
Any advance on this feature?

Yes, i'm currently working on this feature.

@sicarrots I'm using source maps when settings.DEBUG since compressor just passes through the original tags, but it seems pretty tricky to make them work after concatenation and relocation. How are you approaching it?

I'm having some success experimenting with Compressor and uglify.js. For now I've subclassed the JsCompressor and overridden output to work around the whole filter/concat/filter chain and only use Uglify for all activities (concat, compress, generate source maps).

source maps are used by sentry too https://www.getsentry.com/docs/sourcemaps/

@fetzig Exactly my rationale behind doing that

@Kos Would you kindly paste some code for inspiration purposes ? Thanks B)

This is what I ended up using: https://gist.github.com/Kos/9270494 (I have offline compression on production and no compression in development)

Next step would be to allow using {% compress js %} for the normal JsCompressor (because the filter/concat/filter chain sometimes does get helpful) and set up something like {% compress uglify %} to use my custom class, but I haven't figured out a way to do that by configuration.

edit: :beers: :-)

:beers: @Kos!

+1 for that feature!

+1 I would like this feature also. It is very handy to be able to debug JS compressed files in production. Sentry errors do not make much sense if not.

+1 for the feature, absolutely required for Sentry errors :)

+1 for js and css source maps

I would like to see js/ES6/coffee(even TypeScript) and css/sass/less source map
🍻

Does Compress still not support source maps feature?

No, it still does not support that feature. You're welcome to submit a PR implementing this.

It's still possible to implement some "hackish" solution, for example:
https://bitbucket.org/imposeren/tabletop-planning/src/7d551806cfee2c5493b7273e40c5448aec480544/tabletop_tools/compressor_filters.py?at=master

Better solution is required to make PR...

Was this page helpful?
0 / 5 - 0 ratings

Related issues

camilonova picture camilonova  ·  7Comments

bobort picture bobort  ·  20Comments

markstahler picture markstahler  ·  17Comments

amosjyng picture amosjyng  ·  5Comments

alper picture alper  ·  24Comments