Feature request: source maps for Chrome

[miguelgrinberg]

Chrome's debugger supports the use of source maps, which produce a mapping from the minified code that is being executed to the source files that produced it. When source maps are used, you can step through the original code and even set breakpoints, while Chrome internally executes the minifiied code.

Javascript transpilers such as Babel, TypeScript and coffeescript all support generating source maps to allow the developer to see the source files in Chrome and not the generated JS. Recent builds of Chrome have source maps enabled by default.

It would be a killer feature to have source maps for Transcrypt generated code, so that you can work with Python in the Chrome debugger.

[JdeH]

This is something that has been on my wish list for some time. With the release out I think this is a good moment to take a look at that. Thanks for the suggestion, I'll do so on short term.

[miguelgrinberg]

Thanks, I see that you already started working on this on a branch. If there is anything I can do to help without getting in your way please let me know!

[JdeH]

Thank you for the offer! Although the principle is simple, it'll take some time working this out, avoiding one-off errors and dealing properly with multi-stage transformations.

Once it works it'll have to be tested. I would appreciate if you would do some of that, Upto now I do most of the testing myself, but I sure will have missed things.

An other thing that would be very useful are showcases and demo's. I have planned at least three websites using Transcrypt, one for myself and two for a third party, but this still some months off. If you use Transcrypt for production anywhere and it's allowed, send me a link to the site.

In the long run I hope people will start developing library wrappers for it or port CPython stuff. Can't do that all by myself.

Don't feel obliged in any way! But those are some points where my one man power falls short.

[Brakkar]

Hello, missing sourcemaps are the only thing that keeps me off
Not just for google chrome.... My ide pycharm supports javascript debug with sourcemaps.
Would be great to have them on transcrypt. Thanks.

[JdeH]

Sourcemaps will be in without a doubt! Together with bugfixes this has the highest priority. Due to it's complexity with mixing multple source file and native JS code it will take some time though.

[JdeH]

@miguelgrinberg
Sourcemaps are 95% ready. You can give them a first try at:

http://www.transcrypt.org/pong.html

NB1. The source of fabric.js is not yet included.
NB2. Multilevel sourcemaps are not yet supported, so you work from the non-minified js file.

[miguelgrinberg]

Nice! Works really well, I can set breakpoints, look at variables, etc. You did a fantastic work. In my opinion, the close to one-to-one translation that you are doing, plus the source maps set Transcrypt apart from the other py-to-js solutions out there. I will be looking into exposing or porting JS frameworks. I'm particularly interested in backbone, because it has a class-based structure that I think translates well into Python.

[JdeH]

It turned out to be quite hard to find a subset of the sourcemap syntax that actually worked in a multi module situation.
E.g. pure index maps with an URL rather than a submap seemed to work on no browser at all and I couldn't find any examples.
In the end I found a consistent subset that works at least on Chrome, which is widespread.

Would be great if you ported c.q. exposed libs that you judge important!

[JdeH]

Multi-level sourcemaps now supported

[Brakkar]

Hello, I added your site here: http://www.transpilers.io Hope it will bring you many visitors ! Benj 2016-04-13 8:01 GMT+02:00 Jacques de Hooge <notifications@github.com>:

…

Sourcemaps will be in without a doubt! — You are receiving this because you commented. Reply to this email directly or view it on GitHub <https://github.com/JdeH/Transcrypt/issues/18#issuecomment-209241666>

[JdeH]

Good action, thank you!