Source code: https://github.com/i042416/react-demos/blob/master/demo02/index.html
If you would like to debug line 20 and 24 and set a JavaScript breakpoint there, the breakpoint can never be triggered, since the source code is written with a combination of both JS and JSX( the code wrapped with "<>" will be parsed based on HTML rule, and "{}" with JavaScript rule. Pay attention to the type "text/babel" in line 16 ).
Instead, insert a line "debugger" before the JavaScript code you would like to debug,
And then the breakpoint will be triggered as expected.
If you would like to view the converted JavaScript code, go to the third callstack:
Go to console and type "new Function(transform(code, opts).code).toString();", then you can see the converted source code:
The framework has already provided a handy tool for converted source code view: just click the hyperlink in the console here:
Then you can also see the converted source code in new Chrome tab:
