Debugging doesn't work as expected on line

[digeff]

Set a breakpoint on lines 75 and 81 of MovieScreen.js of the Movies React-Native sample application:
https://github.com/facebook/react-native/blob/cd89016ee7168bb6971f800779e0878e9a70206f/Examples/Movies/MovieScreen.js#L75

Step into the code when the debugger hits those lines. The debugger is not going into the method getTextFromScore which is what I'd expect it to do.

[MSLaguana]

This looks like a consequence of the way JSX compiles down into javascript. The JSX block there corresponds to something like the following javascript:

return (
React.createElement(View,null,
React.createElement(View,{style:styles.rating},
React.createElement(Text,{style:styles.ratingTitle},'Critics:'),
React.createElement(Text,{style:[styles.ratingValue,getStyleFromScore(criticsScore)]},
getTextFromScore(criticsScore))),


React.createElement(View,{style:styles.rating},
React.createElement(Text,{style:styles.ratingTitle},'Audience:'),
React.createElement(Text,{style:[styles.ratingValue,getStyleFromScore(audienceScore)]},
getTextFromScore(audienceScore)))));

Note that there is only one statement there, and the whole thing is compiled into one nested function invocation. There is no intermediate point that we can set a breakpoint where some part of that has executed but the getTextFromScore line has not, or at least I could not in the node debugger.

[mbraude]

Chrome does not support this functionality.