1

I'm currently experimenting with React. I used create-react-app to bootstrap the application.

create-react-app hides all the configuration and let's us dive into code without babel/webpack configurations.

My question is that when I put a debugger in any place in code, it stops in debugger in chrome/ie/firefox. And it shows me the JSX syntax there, same as my source file. While I believe JSX needs to be transformed to be worked in the browser, so how does I'm able to see the code while debugging.

enter image description here

And I have same question for es2015 debugging. Specially in internet explorer. It does not clearly supprt es2015 but when I debug it let's step through my code like it supports it.

mfahadi
  • 419
  • 2
  • 10
  • 4
    it's related to source maps, they contain data about how your source code relates to transpiled code, so browser is working with the transpiled code, but shows you your source code, with the help of source maps. you can get some info here: https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map. Actually, it's nothing special to React or something, this technique is used to debug all transpiled javascript in browsers – Andrey Saleba Mar 21 '17 at 07:40
  • Possible duplicate of [External source maps for minified, transpiled ES6 code with webpack and gulp](https://stackoverflow.com/questions/30309860/external-source-maps-for-minified-transpiled-es6-code-with-webpack-and-gulp) – Paul Sweatte Aug 30 '17 at 09:06

0 Answers0