Skip to Content
Author's profile photo Jerry Wang
Jerry Wang
February 21, 2016 1 minute read

How to get and debug converted source code in React

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 ).

/wp-content/uploads/2016/02/clipboard1_891957.png

Instead, insert a line “debugger” before the JavaScript code you would like to debug,

/wp-content/uploads/2016/02/clipboard2_891958.png

And then the breakpoint will be triggered as expected.

/wp-content/uploads/2016/02/clipboard3_891971.png

If you would like to view the converted JavaScript code, go to the third callstack:

/wp-content/uploads/2016/02/clipboard4_891972.png

Go to console and type “new Function(transform(code, opts).code).toString();”, then you can see the converted source code:

/wp-content/uploads/2016/02/clipboard5_891973.png

The framework has already provided a handy tool for converted source code view: just click the hyperlink in the console here:

/wp-content/uploads/2016/02/clipboard6_891974.png

Then you can also see the converted source code in new Chrome tab:

/wp-content/uploads/2016/02/clipboard7_891975.png

Assigned Tags

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