15

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.

Community
  • 1
  • 1
Lane Rettig
  • 6,640
  • 5
  • 42
  • 51
  • I also noticed that the `this` variable behaves differently between the Chrome debugger and the transpiled code sometimes. If I use arrow functions, the code looks fine in the debugger but I occasionally get `_this. is not a function` when I run the code. Is this also expected? – Lane Rettig Jan 21 '16 at 15:13
  • I can't use _MyModule. For example, here's what I'm seeing in the bundle file: `var _MainContainer=require(565 /* ./MainContainer */);var _MainContainer2=babelHelpers.interopRequireDefault(_MainContainer);` But it's not available in the chrome console. I can't seem to find anything by inspecting the `window` object either. – faceyspacey.com Apr 27 '16 at 06:39
  • I can't even assign something to `window.something = foo`. I've wondered about this for a while, but just let it go. It's a problem though because I used to be in the console all the time testing code out. – faceyspacey.com Apr 27 '16 at 06:47
  • ah, you need to be in the 'debuggerWorker.js' frame within the chrome console. I can at least find what I assign to `window` now. I'm sure I'll be able to find everything else soon. – faceyspacey.com Apr 27 '16 at 06:48
  • Thanks for the helpful comments. Yes, I think the `debuggerWorker.js` thing changed not long ago. – Lane Rettig Apr 27 '16 at 09:56
  • I was never able to find the modules in the the `window` object anywhere, and I explored all the top level keys. What I fell back to was in my code requiring the objects and functions I wanted to test in the console and assigning them to a key on the window object myself. But that's obviously annoying because you have to litter your app with throwaway code every time you want to check something out in the console. Did you ever find a place where they all already live?? I imagined something like `window.exports` or something. – faceyspacey.com Apr 27 '16 at 21:42
  • Hi @faceyspacey.com I see the modules pretty clearly in the Chrome debugger without having to do anything special. Just expand the "Closure" bullets under "Scope" in the "Sources" tab ([screenshot here](http://i.imgur.com/FsHGUZR.png?1)). Note that the names are mangled by the module import system. I'm using ES6 imports, RN 0.22, and Chrome 50. – Lane Rettig May 03 '16 at 14:12
  • @faceyspacey.com, did you ever find a solution for this? – funkyeah Jul 08 '16 at 19:59
  • @funkyeah i just assign objects to window and access them in the debugger frame of chrome. – faceyspacey.com Jul 09 '16 at 20:22
  • Roger that, I guess that is what I'll do to. Seems like there should be a better way. – funkyeah Jul 11 '16 at 16:05

1 Answers1

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.

Marzieh Bahri
  • 554
  • 7
  • 20