Debugging Babel 6 generated ES2015 code does not work

Question

I am experimenting with ES2015 JavaScript and using Babel 6 on grunt to compile the code into browser compatible code.

When I user Babel's online code converter ( https://babeljs.io/repl/ ), and copy the code into my file, debugger works perfectly once in Chrome.

But if I keep the code that is generated by babel in grunt, debugging is triggered, but not at the right line number.

Their online tool uses Babel 5, and I'm using version 6, so I understand that something is obviously different. But after taking a close look at the output of both versions, it seams that the only difference is a few closures here and there.

Am I missing anything?

Here is my ES2015 JavaScript code:

class DropdownMenu {
    constructor( buttonId ) {
        this.button         = $( buttonId )
        this.dropdown   = $( this.button.data( 'dropdown-id' ) )
        this.activeItem = this.dropdown.find( 'a.active' ).index()
    }

    initialize() {
        this.button.on( 'click', e => {
            debugger
            this.dropdown.toggleClass( 'active' )
        })
    }
}

var leadsDropDown = new DropdownMenu( '#options' )
leadsDropDown.initialize()

Here is the output of Babel 6 through grunt:

'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var DropdownMenu = function () {
    function DropdownMenu(buttonId) {
        _classCallCheck(this, DropdownMenu);

        this.button = $(buttonId);
        this.dropdown = $(this.button.data('dropdown-id'));
        this.activeItem = this.dropdown.find('a.active').index();
    }

    _createClass(DropdownMenu, [{
        key: 'initialize',
        value: function initialize() {
            var _this = this;

            this.button.on('click', function (e) {
                _this.dropdown.toggleClass('active');
            });
        }
    }, {
        key: 'toggleDropdownMenu',
        value: function toggleDropdownMenu() {}
    }]);

    return DropdownMenu;
}();

var leadsDropDown = new DropdownMenu('#options');
leadsDropDown.initialize();
//# sourceMappingURL=admin.min.js.map

And here is the output of Babel 5 using their online tool:

'use strict';

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

var DropdownMenu = (function () {
    function DropdownMenu(buttonId) {
        _classCallCheck(this, DropdownMenu);

        this.button = $(buttonId);
        this.dropdown = $(this.button.data('dropdown-id'));
        this.activeItem = this.dropdown.find('a.active').index();
    }

    _createClass(DropdownMenu, [{
        key: 'initialize',
        value: function initialize() {
            var _this = this;

            this.button.on('click', function (e) {
                debugger;
                _this.dropdown.toggleClass('active');
            });
        }
    }]);

    return DropdownMenu;
})();

var leadsDropDown = new DropdownMenu('#options');
leadsDropDown.initialize();

Answer 1

Here is what I have noticed. I believe there is a bug with the generated sourcemaps...

If I turn source maps off, everything works. My debug statement get's triggered at the proper line number inside chrome.

But when it is on, it isn't working. Now, I don't believe turning source maps off is the best solution, but it is a temporary one.