Debugging ES6 import statements with React Native in Chrome

Question

I rely heavily on React Native's "Debug in Chrome" feature and hence on Chrome's debugger. But I've noticed a huge flaw with this system: modules that I import using an ES6-style import are not visible in the scope in Chrome even though the code executes fine. This makes debugging code using these import statements very difficult.

If I replace an import statement with a var MyModule = require(...) then the module is visible in the scope.

After reading ES6 module import is not defined during debugger I took a look at the transpiled source code produced by React Native (by loading http://localhost:8081/index.ios.bundle?platform=ios&dev=true in my browser) and noticed that the module in question is loaded under a different name:

var _MyModule = require('MyApp/MyModule.js');
var _MyModule2 = babelHelpers.interopRequireDefault(_MyModule);

and indeed I can use _MyModule2 in Chrome. I have a couple of related questions:

1. Source maps seem like an amazing technology! Why don't they support mapping variable names too?
2. Is there any way to make debugging with import statements easier in Chrome with React Native? For instance, I'm used to just moving my mouse over a variable in Chrome to see the value, but this is no longer possible with these imports. (Debugging with chrome with es6 suggests enabling #enable-javascript-harmony in Chrome and turning off source maps but given the Flow code and uglification I doubt this would work well.)

Thank you.

Answer 1

I have enabled Chrome experimental features in Chrome flags and I have no problem using an ES6-style import. If you haven't, type chrome://flags in your address bar and look for Experimental JavaScript. This should solve your problem.