Source map problem: debugger points to a wrong source file + source map question in relation to typescript's source maps

[d-ph]

Hello there,

I've got a problem with Chrome Google Dev Tools not being able to point to a correct line in minified js source. This is hard to explain so I've prepared a zip file, which allows me to reproduce the problem.

link to the zip file

1. Download and unzip the file.
2. Cd to the extracted directory.
3. Run npm install.
4. Run grunt -> will compile typescript files
5. Run grunt build -> will run r.js to concatenate & minify relevant .js files
6. Run php -S localhost:8080 -> will serve the directory over http (requires php 5.4).
7. Open Google Chrome. Go to localhost:8080 -> a blank page should open
8. Open Developers Tools.
9. Go to to the Console tab. -> You should see, that an error occurred in page1.ts file. The link should take you to the .ts file which contains the error. This shows, that typescript source maps works correctly.
10. Edit index.html. Comment line baseUrl: "/js/ts-compiled",. Uncomment line baseUrl: "/js/ts-compiled-optimized",. Save the file.
11. Refresh the page in Google Chrome. -> You should see, that an error occurred in page1.js:1 file. The link should take you to the .js file which contains the error. If you beautify the .js file using the Google Chrome dev tools feature, you can see, that Google Chrome points to the correct place in the file. So everything's still working.
12. Edit Gruntfile. Uncomment lines: generateSourceMaps: true, and preserveLicenseComments: false,. Save the file.
13. Run grunt build.
14. Refresh the page in Google Chrome. -> You should see, that an error occurred in widget1.js file. The link should take you to the unminified version of widget1.js.

So, two things about the step 14.:

1. Google Chrome points to a unminified file, which is good.
2. Google Chrome doesn't point to the file, where the error occurred. (i.e. to the page.js file).

Did I mess up something with my r.js configuration? I tried different things, but I couldn't make it work correctly.

The other thing is: is it possible to configure r.js/uglify2 to create source maps in such a way, that they point to the original .ts files after the minification? I read this post: link, but:

1. It uses uglify grunt task to do the job. It's ok, but I would rather not over-complicate my build procedure with yet another moving part. I would rather use r.js itself for talking with the uglifyjs2.
2. It assumes, that there is only one file, that is produced. I would like to provide a directory of source maps, that needs to be included in the final source maps generation, because I would like to use requirejs, to implement a multipage-require solution (1 common file and a bunch of page*.js files) (see the provided .zip file; I didn't exactly follow this solution, because I need to support a legacy code).

So far I'm very happy with the requirejs and r.js. The source maps issue is the last thing that currently bothers me (although it is an issue only for the production environment, because in dev I don't minify those files which is faster and which allows me to use .ts source maps). I'd appreciate a hand here.

Thanks.

[jrburke]

Source map support has been uneven just given browser bugs and issues with proper chaining against tools. Bug #470 goes into more of the issues. The example is really helpful, thanks for putting it together. It has been difficult for me to work through all the source map issues, so I am not sure when or how it will get sorted yet though.

[d-ph]

Hello James,

Thanks for a quick response. I'm glad you found my example helpful. Not having those source maps working entirely how they should is not a show-stopper for me, so take as much time as you need to make a decision on how to tackle this matter. I'm now following the #470 ticket. It's good to know, that I'm not the only one finding this as an issue.

Thanks for require.js, James. It's really a piece of good software.