Vscode-react-native: unable to set break points in my code

Created on 9 Apr 2016 · 7Comments · Source: microsoft/vscode-react-native

Actual Behavior

I just get 'unverified break point' and it's never hit

here is code I am trying to set break point on..

const ReferenceLinks = compose(createContainer(frags))
  (({referenceDescriptions, navigator, header})=> 
  (
    <ListView
      renderHeader={()=><View>{header}</View>}
      //renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
      style={styles.listView}
      contentContainerStyle={styles.listViewContent}
      dataSource = {lv.cloneWithRows(referenceDescriptions)}
      renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator} />}
      renderRow = {(row)=>
        <View style={{flexDirection: 'row', justifyContent: 'center'}}>
          <ReferenceLink
            referenceDescription={row.node}
            navigator={navigator}/>
        </View>
      }>
    </ListView>
  ));

Expected Behavior

should be set ok and hit

Software versions

React-Native VS Code extension version: 0.1.3
VSCode version: 0.10.11
OS platform and version: mac os el capitain
React Native version: 0.22.2

Outputs (Include if relevant)
Output of the Debug Console (View -> Toggle Debug Console):
Output of the React-Native output channel (View -> Toggle Output -> Select React-Native in ListBox):
Output of the Developer Tools console (Help -> Toggle Developer Tools -> Select Console tab):

Source

gilesbradshaw

Most helpful comment

@gilesbradshaw Please do tell us if you find out how to generate the correct source maps!

digeff on 13 Apr 2016

👍3

All 7 comments

@gilesbradshaw In which exact line are you trying to set the breakpoint?

digeff on 11 Apr 2016

Can you hit breakpoints in other parts of the program?
What happens if you use a hard breakpoint as in:
debugger;

digeff on 11 Apr 2016

.In which exact line

<ListView>

I change it now to

{ 
    return <ListView>

(trying to hit return above)

. Can you hit breakpoints in other parts of the program?

sort of but when I put in a break point it seems to stop at a different place in the editor..

.What happens if you use a hard breakpoint as in:
debugger;

It kind of works although again it shows the breakpont hit in the wrong place (but I can watch function params).

If u wanted to try my app you could do

git clone https://github.com/gilesbradshaw/ua-ql-mobile.git awesome2
cd awesome2
npm i

debugger gets hit when you pic "fourth" or "fifth" in navbar at top
"debugger" is in components/referencelinks.js line 55

(if u did try and I've removed debugger - just add it above return on line 55)

gilesbradshaw on 12 Apr 2016

I've had a look at your project, and I believe that this is an issue with the sourcemaps being generated.

If I disable sourcemaps and run your project, when I navigate to the "Fourth" tab then I hit the debugger; statement that you added, which appears to be on line 98495 of the index.ios.bundle. However if I query the sourcemaps for that position, it gives me an invalid location:

> smc.originalPositionFor({line: 98495, column: 5})
{ source: '../../components/ReferenceLinks.js',
  line: 85,
  column: 0,
  name: null }

Note that ReferenceLinks.js only has 77 lines in the source. I suspect that there is some babel transformation which is not treating source maps correctly, and so the end result does not correctly map the bundle to the original sources. This isn't something that we can fix on our end, and I'm afraid I don't know where specifically things have gone wrong for you; I'm not familiar with the babel plugins you are using.