es6 babelify changes variable name, variable can't be found in inspector

Question

I am using es6 modules in my application, and I am encountering a problem when debugging in my chrome inspector. When I do something like the following in my code:

import 'widget' from './widget'

class SomeClass {
  componentDidMount(){
    debugger; // widget is not defined here according to chrome console!
    widget.doSomething();
  }
}

Looking at the compiled source file which the browser is reading, I see that the babelify transform that was applied to the original js files has renamed the 'widget' variable into something like '_widget_Js'. However, I have compiled the JS along with source maps, so the chrome inspector shows the original JS files, but doesn't recognize it when I refer to the original 'widget' variable (it does see the '_widget_Js' variable, but I certainly don't want to have to look up the compiled translated variable every time I debug!) .

Any suggestions on how I can get chrome to recognize the original import name? If it helps, I can provide more information on my setup (gulp + browserify + babelify). Thank you!

Answer 1

There's really nothing you can do. If Chrome implements support for the mappings in source map names, that will help somewhat.