Skip to Content
Author's profile photo Jerry Wang

How to get and debug converted source code in React

Source code:

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:


Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.