Add JS and CSS sourcemaps. #147
Conversation
|
@alicoding does this look OK to you? Aside from production-related tasks like minification, is there anything #139 does that this doesn't do? |
| @@ -6,6 +6,7 @@ var index = require('./lib/index-static.jsx'); | |||
|
|
|||
| module.exports = { | |||
| entry: './lib/main.jsx', | |||
| devtool: 'source-map', | |||
There was a problem hiding this comment.
this doesn't work for Firefox for some reason and I have to set it to eval to get it to work.
There was a problem hiding this comment.
Hmm, what do you mean by "work for Firefox"? In general I've found that Firefox has very poor support for source maps--they work fine in the debugger, but not the console.
For instance, here's what a debugger statement does in Firefox, with the code in this PR applied:
As you can see there it's correctly mapping to the original JSX source.
However, see that console.log("HI") right before the debugger statement? This is what that looks like in the console:
In other words, it's not source-mapping the location of the logging statement.
This is particularly frustrating for me because I spend much more of my time in the console than I do in the debugger. But I've never found a project that works any differently on Firefox, so when I really need source-mapped console.log() statements, I just switch to Chrome. It's kind of Chrome devtools' killer feature for me. :(
There was a problem hiding this comment.
Exactly the problem I was facing and had to set to eval to get this working both on debugger and console, but lets land this one for now and document that in order to get the console to work they either have to set eval manually for Firefox or use the debugger.
There was a problem hiding this comment.
Whoa, yeah, you're totally right, setting devtool to eval does make console logging work on Firefox!!!!
WOW.
Unfortunately, it's totally dumb that this won't work on production, since it uses eval() to evaluate the code and thus won't work w/ minified stuff. It really sucks that Firefox's support for .map. files is limited to the debugger only.
Another thing I've just noticed about the eval approach is that it's actually only showing us the JSX file after the JSX transform. Which for Firefox console logging is still way better than referring to bundle.js, but for all other use cases (e.g. Chrome, the FF debugger) it's worse, since those other use cases show us the original JSX source when we use .map. files. So there is no clear winner here, which is lame.
There was a problem hiding this comment.
Hmm, I just noticed that the exception tracebacks shown in mocha browser tests are also un-sourcemapped when using source-map, even in Chrome, but they work fine with eval.
|
r+ with updating the README regarding Firefox users how can they debug here. |
|
Good idea, I've added an optional |
As mentioned in #139 (comment), this adds JS and CSS source maps to all builds, regardless of whether they're dev or prod.
Since the source maps are provided in separate
.map.files that only dev tools access, they shouldn't impact the load times of production builds, and they also encourage anyone to delve into our site and see how it works!