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:
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.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.