Debugging Javascript/ReactJS errors

If you know that an error is thrown but swallowed by some other code, you can enable in your browser's debugger to pause execution when an exception is thrown, even if it is caught somewhere:

Note however that libraries sometimes deliberately trigger exceptions while testing whether the browser supports certain features. You'd have to step over those.

Usage of React Hot Loader which is a Webpack plugin should solve most of the problems you have in a development process. It's easy to integrate into existing project and has quite a few examples how to put all the things together.

As a result:

• your code changes would be pushed to the browser
• in case of the error you will have meaningful stack trace in the browser console.

I'm guessing that the incorrect JS syntax is causing your gulp process to fail which would result in your application not being bundled/deployed in the browser at all.

It seems like there should be errors in your system console (where gulp is running) - as opposed to your browser console. Possibly your gulp process crashes when this happens too. If there are no errors in your console, you may have to listen for them. This post has an example of how to log errors from browserify:

gulp.task('browserify', function(){  var b = browserify();  b.add('./main.js');  return b.bundle()    .on('error', function(err){      console.log(err.message); //      this.end();    })    .pipe(source('main.out.js'))    .pipe(gulp.dest('./dist'));});

Probably the best solution is to run your code through jshint before browserify so that you aren't trying to browserify syntactically invalid code.

Caveat: not a current gulp user