2

I'm having problems to debug my babel transpiled ES6 in chrome.
I'm building a simple ES6 style angular app:

Main Controller:

class MainController {

  constructor($timeout) {
    this.timeout = $timeout;
  }

  onEvento() {
    this.timeout(function() {
      alert('hello');
    },1500);
  }
}

MainController.$inject = ['$timeout'];
export default MainController;


app.js:

import MainController from 'controllers/main.js';

angular.module('app', [])
  .controller('MainController', MainController);

angular.bootstrap(document, ['app']);

gulp task:

gulp.task("default", ['clean'], function () {
  return gulp.src(['www/**/*.js'])
    .pipe(sourcemaps.init({identityMap:true}))
    .pipe(babel())
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("www/dist"));
});

The transpiler works OK, and the code works. Sourcemaps are generated and chrome loads them.

But when I try to put a breakpoint in the constructor of the MainController, Chrome does not allow it. It puts the breakpoint in the line below ("}" in this case).

I can put a brakpoint in the first line of method "onEvento" and works, but I can't put it on the "alert".

I also tried using browserify instead of System.js, and using browserify the breakpoins works perfectly on Firefox, (Firefox does not load sourcemaps when using System.js) but the same problem happens in Chrome.

Did anybody face this problem?

Rafael Gil
  • 21
  • 1

0 Answers0