

SourceMaps in Chrome allow debug of any source language compiled to JS - cromwellian
https://plus.google.com/u/1/110412141990454266397/posts/Nvr6Se6eAPh
A small demo of the SourceMaps support in Chrome Dev Tools which allows languages which are cross compiled to Javascript (Java, CoffeeScript, Objective-J, ClotureScript, even minified-JS) to be source level debugged in the browser.<p>Firefox will also be sporting support for SourceMaps.
======
asadotzler
If you'd like to help with the Firefox implementation, there's code and specs
here <https://wiki.mozilla.org/DevTools/Features/SourceMap>

------
asadotzler
This is coming to Firefox as well. I remember watching an intern present some
early prototypes a year or so ago.

~~~
cromwellian
Do you know if Firefox is making progress, or is it stalled?

~~~
masklinn
<https://wiki.mozilla.org/DevTools/Features/SourceMap>

It's reached a demoable state, but is not complete and can't be landed: it was
worked on by an intern and the intern has now gone back to life.

~~~
cromwellian
:( That happens at Google often too. We are always happy when Summer-of-Code
rolls around and we get interns again. :)

~~~
andybak
That old 'unpaid labor' thing working out well for you then!

~~~
pufuwozu
Successful Google Summer of Code students get paid for their projects.

~~~
TruthElixirX
_That old 'unpaid labor' thing working out well for you then!_

------
thomasfl
Demo of another SourceMap effort used to debug Coffeescript:
<http://www.youtube.com/watch?v=UAGAB-yT0lQ>

------
ilaksh
Do SourceMaps allow you to debug CoffeeScript in Chrome and if so what exactly
do you do?

~~~
YmMot
It allows you to debug _any_ language that compiles to JavaScript, with the
caveat that the language's compiler must output source-map compatible code (or
the source must be run through some other program that somehow does it).

It's a pretty simple but extremely useful idea. To use your example, the
CoffeeScript compiler knows exactly which bits of generated JavaScript
correspond to exactly what bits of CoffeeScript code, so the compiler can
output a mapping that says "these lines of JavaScript are the result of this
line of CoffeeScript...so when you step through this CoffeeScript line,
execute these X lines of JavaScript, if an error occurs in these X lines of
JavaScript show there error as occurring on line Y of the CoffeeScript code.

I haven't done much front-end lately so I'm not sure what if any the
CoffeeScript compiler has in terms of generating source maps, but if browsers
are supporting it I imagine it won't be long if it's not here already.

~~~
cromwellian
AFAIK, the CoffeeScript guys are working intensely on it. To some extent, any
language which has accurate source position information in its parser/AST, and
uses Closure Compiler on the backend can get source map output almost for
free.

~~~
YmMot
Yea I would imagine they are. I haven't been following the development like I
used to, so thanks.

How accurate does the source position information have to be? I don't think
the CoffeeScript lexer can output column numbers (at least it didn't last time
I checked) and the re-writing stage might give them a little trouble. Should
be doable though.

Guess I should head over to github and see how they're doing and start reading
the SourceMap spec.

~~~
cromwellian
IIRC, you only need line number and filename. The map is JS
<startline/startcol> -> Source <line,filename>

~~~
jschorr
However, you can embed extra metadata for your specific source language if you
wish, via the extension mechanism. Debug tools can then read the metadata in
to do extra neat kinds of mapping (such as collapsing "native" stack frames).

------
petegrif
Very interesting. The reason we didn't want to use GWT was precisely because
of the difficulty of debugging. This is a big step in the right direction.

The talk emphasizes debugging js as output of another language. But did I
understand correctly that it can be used to debug js programs directly? Makes
sense and would be awesome.

Great job - again.

~~~
cromwellian
Yes, if you have regular hand-written JS, and let's say you run UglifyJS, YUI
Minifier, or Closure Compiler, to generate compact, optimized JS, with source
maps, the debugger will show the _original_ JS source.

The demo I showed also is using SuperDevMode for GWT, which dramatically
speeds up the compile. Notice, I compile a project (the Mail sample) of
several hundred Java source files in less than 2 seconds.

~~~
petegrif
Thanks Ray. Nice tool for reverse engineering then. :)

~~~
duotor
This is not reverse engineering. The compiler generates the compact javascript
along the SourceMap.

~~~
YmMot
I think what they mean is say you have a bit of obsfucated, minified, and or
complex JavaScript code you want to reverse engineer. You can start writing a
an "unobsfucated" version in JS, pseudocode, whatever you wanted....and use
source-mapping to switch between looking/working on that and the original in
the debugger all while the browser is actually executing the original code
(negating worries that your translation is incomplete or behaves differently,
these are concerns _during_ certain steps of the process...obviously you want
to end up with a perfect translation in the end)

That would be a useful tool in reverse engineering.

------
grayrest
Is this in Canary? I know you said "soon" but I'm always unsure if soon means
soon in stable/dev or soon in canary.

~~~
pufuwozu
In Canary 19.0.1074.0 for me

------
cromwellian
BTW, thanks for all the positive feedback. If you are working on a language
translator to JS and end up including sourcemap support, just ping me on G+
and I'll put it into a directory of source-map enabled tools.

------
zem
hope js_of_ocaml implements this.

------
angelbob
Link to documentation? If I wanted to build my own little JavaScript
preprocessor and make it use SourceMaps in Chrome, how would I know the file
format(s)?

~~~
angelbob
Oh hey -- here's Google's current draft, linked from the FireFox bugs about
it:
[https://docs.google.com/a/ooyala.com/document/d/1U1RGAehQwRy...](https://docs.google.com/a/ooyala.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit)

------
duotor
Debugging GWT through the dev mode used to be slow and painful. The SourceMap
will definitely make GWT development more cool.

Great move guys!

------
thomasfl
I would love to debug coffescript with this.

------
nailer
Isn't source mapping part of ES6?

~~~
pufuwozu
SourceMap is a tool feature - no need to modify a language (except if you
count making the compiler output SourceMaps).

Maybe you're thinking about how the Traceur ES6 to JavaScript compiler outputs
SourceMap information?

