Skip to content
This repository has been archived by the owner on Mar 5, 2020. It is now read-only.

Add JS and CSS sourcemaps. #147

Merged
merged 2 commits into from
Mar 5, 2015
Merged

Add JS and CSS sourcemaps. #147

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
550cb0d
enable source maps in webpack.
toolness Mar 5, 2015
aeed103
enable sourcemaps in LESS/CSS.
toolness Mar 5, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions gulpfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ var less = require('gulp-less');
var prettify = require('gulp-prettify');
var webpack = require('gulp-webpack');
var plumber = require('gulp-plumber');
var sourcemaps = require('gulp-sourcemaps');

require('node-jsx').install();

Expand Down Expand Up @@ -54,9 +55,11 @@ gulp.task('copy-dirs', function() {
gulp.task('less', function() {
return gulp.src(LESS_FILES)
.pipe(handleError())
.pipe(sourcemaps.init())
.pipe(less({
paths: [path.join(__dirname, 'less')]
}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./dist'));
});

Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"gulp-plumber": "^0.6.6",
"gulp-prettify": "^0.3.0",
"gulp-s3": "^0.3.0",
"gulp-sourcemaps": "^1.5.0",
"gulp-util": "^3.0.4",
"gulp-webpack": "^1.2.0",
"gulp-webserver": "^0.9.0",
Expand Down
1 change: 1 addition & 0 deletions webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ var index = require('./lib/index-static.jsx');

module.exports = {
entry: './lib/main.jsx',
devtool: 'source-map',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this doesn't work for Firefox for some reason and I have to set it to eval to get it to work.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:

2015-03-05_12-11-36

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:

2015-03-05_12-12-29

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. :(

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whoa, yeah, you're totally right, setting devtool to eval does make console logging work on Firefox!!!!

2015-03-05_12-26-17

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

output: {
path: __dirname + '/dist',
filename: index.JS_FILENAME
Expand Down