Changes

Jump to: navigation, search

DevTools/Features/SourceMap

1,937 bytes added, 13:36, 20 July 2011
no edit summary
The solution to this problem is a mapping from the generated JS to the original source files.
|Feature users and use cases=Moderately sophisticated JavaScript developersCase 1: Minified files A user can take .js source files and compress them with the Closure Compiler. Errors and log messages in the Web Console will refer to the original .js files. Case 2: CoffeeScript You can start with a .coffee file. Any log output or errors generated will refer back to the original .coffee file, rather than the generated .js file.  |Feature requirements=* SpiderMonkey needs to output column in addition to source/line.* When a sourcemap is available, error messages in console will link to the original source, not the generated JS
* Likewise, console log output will link back to the original source
* Patches for CoffeeScript and UglifyJS will be used to produce examples* The Closure Compiler should generate compatible source maps
* A specification for generated scripts to refer to their mappings and a mapping format
[[Link title]]* SpiderMonkey needs to output column in addition to source/line. 
|Feature non-goals=* Ideally, the source mapping file will also work for mapping LESS and similar to CSS. However, implementing the user interface for style source mapping is out of scope for this particular feature.
* It is possible to have a chain of source maps. Consider the case of a .coffee file that is compiled to .js and run through Closure Compiler. The final source map would refer to lines in the compiled JS, which would have a separate source map referring to lines in the .coffee file. For the first crack at this feature, we will not bother with that case.
|Feature functional spec=I've written a web app called "Social Socialer Socialest". It's going to make me rich. I spent all morning creating it.
 
The app consists of 3 files:
 
* main.js (kicks off everything)
* socialgraph.js (everyone needs a social graph)
* nextgen.coffee (working on the next generation stuff already!)
 
All three files contain a function with a console.log call and a statement that causes some sort of JS error.
 
My build process joins and minifies main.js and socialgraph.js into a file called "s3.js" using the Closure Compiler with the option to generate a source map.
 
It compiles nextgen.coffee to nextgen.js, generating a source map in that process as well.
 
There's also an HTML file. I haven't learned CSS yet, but I've bought a book.
 
The HTML file loads s3.js and nextgen.js.
 
Only l33t folks can use my app. So, I fire up the Web Console and call the functions from the 3 files by hand. In each case, I should see the log output and error message refer to the original files.
 
When I hover over the link to the source files, I should be presented with a link to the .js file that the browser executed as well.
|Feature ux design=[[File:SourceMapInConsole.png|Source mapped output in the Web Console]]
|Feature implementation notes=TBD (status page link)
Canmove, confirm, emeritus
1,093
edits

Navigation menu