4 ms·

SourceMaps in Chrome allow debug of any source language compiled to JS

180 points by cromwellian 15y ago

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. Firefox will also be sporting support for SourceMaps.

petegrif 15y ago
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 15y ago
  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 15y ago
    Thanks Ray. Nice tool for reverse engineering then. :)
    - duotor 15y ago
      This is not reverse engineering. The compiler generates the compact javascript along the SourceMap.
      - YmMot 15y ago
        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.
  - lapusta 15y ago
    Will we see SuperDevMode in GWT 2.5?
asadotzler 15y ago
This is coming to Firefox as well. I remember watching an intern present some early prototypes a year or so ago.
- cromwellian 15y ago
  Do you know if Firefox is making progress, or is it stalled?
  - masklinn 15y ago
    https://wiki.mozilla.org/DevTools/Features/SourceMap 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 15y ago
      :( That happens at Google often too. We are always happy when Summer-of-Code rolls around and we get interns again. :)
      - andybak 15y ago
        That old 'unpaid labor' thing working out well for you then!
        pufuwozu 15y ago
        Successful Google Summer of Code students get paid for their projects.
        TruthElixirX 15y ago
        That old 'unpaid labor' thing working out well for you then!
asadotzler 15y ago
If you'd like to help with the Firefox implementation, there's code and specs here https://wiki.mozilla.org/DevTools/Features/SourceMap https://wiki.mozilla.org/DevTools/Features/SourceMap
ilaksh 15y ago
Do SourceMaps allow you to debug CoffeeScript in Chrome and if so what exactly do you do?
- YmMot 15y ago
  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 15y ago
    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 15y ago
      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.
      - 15y ago
thomasfl 15y ago
I would love to debug coffescript with this.
duotor 15y ago
Debugging GWT through the dev mode used to be slow and painful. The SourceMap will definitely make GWT development more cool. Great move guys!
nailer 15y ago
Isn't source mapping part of ES6?
- pufuwozu 15y ago
  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?
grayrest 15y ago
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 15y ago
  In Canary 19.0.1074.0 for me
thomasfl 15y ago
Demo of another SourceMap effort used to debug Coffeescript: http://www.youtube.com/watch?v=UAGAB-yT0lQ http://www.youtube.com/watch?v=UAGAB-yT0lQ
zem 15y ago
hope js_of_ocaml implements this.
angelbob 15y ago
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 15y ago
  Oh hey -- here's Google's current draft, linked from the FireFox bugs about it: https://docs.google.com/a/ooyala.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit https://docs.google.com/a/ooyala.com/document/d/1U1RGAehQwRy...
cromwellian 15y ago
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.

180 points by cromwellian 15y ago

petegrif 15y ago

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 15y ago
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 15y ago
  Thanks Ray. Nice tool for reverse engineering then. :)
  - duotor 15y ago
    This is not reverse engineering. The compiler generates the compact javascript along the SourceMap.
    - YmMot 15y ago
      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.
- lapusta 15y ago
  Will we see SuperDevMode in GWT 2.5?

asadotzler 15y ago

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

cromwellian 15y ago
Do you know if Firefox is making progress, or is it stalled?
- masklinn 15y ago
  https://wiki.mozilla.org/DevTools/Features/SourceMap 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 15y ago
    :( That happens at Google often too. We are always happy when Summer-of-Code rolls around and we get interns again. :)
    - andybak 15y ago
      That old 'unpaid labor' thing working out well for you then!
      - pufuwozu 15y ago
        Successful Google Summer of Code students get paid for their projects.
        TruthElixirX 15y ago
        That old 'unpaid labor' thing working out well for you then!

asadotzler 15y ago

If you'd like to help with the Firefox implementation, there's code and specs here https://wiki.mozilla.org/DevTools/Features/SourceMap https://wiki.mozilla.org/DevTools/Features/SourceMap

ilaksh 15y ago

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

YmMot 15y ago
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 15y ago
  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 15y ago
    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.
    - 15y ago

thomasfl 15y ago

I would love to debug coffescript with this.

duotor 15y ago

Debugging GWT through the dev mode used to be slow and painful. The SourceMap will definitely make GWT development more cool. Great move guys!

nailer 15y ago

Isn't source mapping part of ES6?

pufuwozu 15y ago
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?

grayrest 15y ago

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 15y ago
In Canary 19.0.1074.0 for me

thomasfl 15y ago

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

zem 15y ago

hope js_of_ocaml implements this.

angelbob 15y ago

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 15y ago
Oh hey -- here's Google's current draft, linked from the FireFox bugs about it: https://docs.google.com/a/ooyala.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit https://docs.google.com/a/ooyala.com/document/d/1U1RGAehQwRy...

cromwellian 15y ago

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.