Breakpoints do not get hit work with while debugging react native app

[MarcoLLeite]

Actual Behavior

1. The debugger seems to work and connect, but I never get a hit on any breakpoints.

Expected Behavior

1. Connect debugger and breakpoint getting a hit

Software versions

• Windows 10 and Windows 7 ( I have tried one 2 machines)
• React-Native VS Code extension version:
• VSCode version: 1.31.1, 1.32.1, 1.32.3
• OS platform and version: android 8.0 (emualtor and device)
• NodeJS version: 10.14.2, 11.13.0
• React Native version: 0.58.5, 0.58.6
• react-native-cli: 2.0.1
• Expo SDK version (include if relevant): not using expo

Outputs (Include if relevant)

• Output of the Debug Console (View -> Toggle Debug Console):

OS: win32 x64
Adapter node: v10.2.0 x64
vscode-chrome-debug-core: 6.7.40
Starting debugger app worker.
Established a connection with the Proxy (Packager) to the React Native application
Debugger worker loaded runtime on port 9330
Running application "FinanceA" with appParams: {"rootTag":211}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
index.bundle:46920
Debugger worker loaded runtime on port 12389
Running application "FinanceA" with appParams: {"rootTag":221}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF

PASTE OUTPUT HERE

- Output of the React-Native output channel (View -> Toggle Output -> Select React-Native in ListBox):

PASTE OUTPUT HERE

- Output of the Developer Tools console (Help -> Toggle Developer Tools -> Select Console tab):

PASTE OUTPUT HERE

This started to happen when I installed the version 1.31.1 more then a week ago. Installing the latest version 1.32.1 does not seem to fix this issue either.
I am not sure if this is directly related to any version as installing previous version does not seem to fix the issue.

Before that it used to work perfectly on both android emulators and android devices. Now it happens while debugging both android emulators and actual devices.

Any suggestions? Ideas?

[SounD120]

Hi @MarcoLLeite , thanks for reaching us. Could you please provide a small demo of your app for better understanding from our side? Also could you please fill up outputs using the template below?

• Output of the Debug Console (View -> Toggle Debug Console):

PASTE OUTPUT HERE

• Output of the React-Native output channel (View -> Toggle Output -> Select React-Native in ListBox):

PASTE OUTPUT HERE

• Output of the Developer Tools console (Help -> Toggle Developer Tools -> Select Console tab):

PASTE OUTPUT HERE

Also it would be great if you add operational system on which you facing this.
Also please make sure that Remote JS Debug is enabled on your device/emulator, we have instructions for enabling that setting in our README.

[SounD120]

Hi @MarcoLLeite . Do you have a chance to look at this?

[SounD120]

Hi @MarcoLLeite . I'm closing this due to inactivity, feel free to reopen the issue and provide additional information if you still facing this problem.

[MarcoLLeite]

Hi @SounD120 ,

Sorry, but haven't got much time up until now.
Yes the issue is still happening, and now it also happens to all my co-workers.

I have a create a new repo under my account "FinanceA", you can use test to replicate it (I have temporarely added you as a collaborator, so you can access it).
https://github.com/MarcoLLeite/FinanceA
I am runing on Windows 7 Ultimate (but it also happens in my surface with Windows 10 - all details about SW versions are on description above).

[SounD120]

Hi @MarcoLLeite I just tested your application and all breakpoints that I set were hit. Could you please add "trace": "verbose" to your debug configuration, run your application and send the outputs here (by the templates I described above), or via email([email protected]) if you think that they would contain private informaton? Also, could you please describe which exact BPs are not working (point to the files and lines of code)? Also, do you use any custom packagers (Haul, etc)?

[MarcoLLeite]

Hi @SounD120 , sent you an email with screenshots and txt with logs.
To debug I use "Attach to packager".
The packager that I had installed ins "react-native tools"
vscode-react-native

[SounD120]

Hi @MarcoLLeite . I recieved your clarification, thank you. I checked all the BPs that you sent to me and all of them works without problems, so my recommendation would be to try this sequence:

1. Run your application with react-native run-android command.
2. Wait when react-native run-android command will run packager instance, then run Attach to packager debug scenario.
3. Check that React Native debugger browser tab is closed (localhost:8081/debugger-ui)
4. Enable Android application Remote JS Debugging via React Native DevMenu

Please try this and say does it work for you?

[macaetano]

I'm having the same issue here. Debugger doesn't stop in any of breakpoints

[MarcoLLeite]

Hi @SounD120.

Thats how I do it basically everyday.
Anyway, I just tried it and, just like before, the debugger connects to vs code, but I am still not getting any breakpoints hit.

Now I went a few steps further and found something interesting:
1 - phone has debbugging enabled, and has given debugging permissions to my computer
2 - Bth devices are connected to the same wireless network (5G - I have also tried all this steps on a 2.4Ghz network)
3 - uninstalled previous version of the app
4 - deleted my node_modules folder
5 - From the root folder I did: "cd Android && grawdle clean && cd .." - to clear previous build
6 - run "npm install --save" to install npm packages again
7 - run react-native run-android
8 - everything run ok and the app installs and opens on the phone
9 - Then on vs code, I went all have added a breakpoint to EVERY single function that I created (including all renders and constructors), EVERYTHING just to see what happens.
10 - I ran attach to packager - Estibilished connection
11 - After checkin that there are NO browser windows opened with the link (localhost:8081/debugger-ui)
12 - I enabled "Debug JS Remotely" on the phone, and the app refreshes
13 - On App Loading (when teh app isopening for the first time after I enabled remote debugger), I get an hit on HomePageNavigationView.Render (No breakpoints hits on funcitons on App.js render neither on AppNavigation.js render);No breakpoint hits anywhere and the HomePageView appears on the phone.
14 - The nI hit the button Go To Expenses ( This button opens ExpensesView.js), then the funciton renderItem in Expenses.View.js gets a hit, I press continue and no more breakpoint hits (it should have stopped in liek 4 or 5 other functions, but nothing).
15 - I play around with this screen and the dialog screen that I have inside, no breakpoints get hit anywhere.
16 - I press the back arrow on the navigation bar and now I get a hit on the function keyExtractorIdUpdated in ExpensesView.js and no more breakpoints.
17 - On the home page, Press the button go to test page (This button opens TestPageView.js), no breakpoints hit.
18 - Press back on navigation, no breakpoints hit.
19 - On the home page, Press Got ot Picker Example (This button opens PickerExample.js), and the renderItem function in ExpensesView.js gets a hit and no more breakpoint hits.
20 - I press the back arrow on the navigation bar and I get a hit on the function keyExtractorIdUpdated in ExpensesView.js again and no more breakpoints.

So I get some breakpoint hits, but they are clearly not alright.
Just to make it clear, during this testing I had a breakpoint IN EVERY FUNCTION of my code.

Like explained before, this is happening to my in Windows 7 machine on the app I gave you access to test with. It also happens on my work surface with Windows 10 and in all 4 surfaces of my 4 co-workers that also use vscode and react native and apparently to @macaetano too.

I don't think there is anything else I can give you to help, but if there is, I am happy to do it

[SounD120]

@MarcoLLeite @macaetano Thanks a lot for your clarifications. Finally I was able to reproduce that, and now starting to work on a fix. As I found out Debug Android debug scenario is not affected by this bug, so you can use it until new version is released.

[SounD120]

Hi @MarcoLLeite . After further investigation I found out that there is no such problems on React Native 0.57.7 and 0.59.3, so could you please try to bump React Native dependencies as shown below:

"react": "^16.8.3",
"react-native": "^0.59.3",

and let us know if you still experience such problems?

[MarcoLLeite]

Hi @SounD120,

Thanks for all your help. I had forgotten to let you know yesterday, but I got the Attach to Process working on VS Code on my Windwos 7 machine by bumping react-native to 0.59.3 (and kept react in version 16.6.3) and with the help of this:
mergeResourcesProvider issue.

I had downgraded from 0.59.3 to 0.58.5, because 0.59.3 was not even building for me, so I went back to the version that seemed more stable (0.58.5), at least on the other project it was building.

Soon I will also update to "react 16.8.3" too, unless it brings other issues.

I will try to use "Debug Android" and try to upgrade react-native on my other project on thesurface with Windows 10 as soon as possible and will let you know (probably happening tomorrow).

[SounD120]

Hi @MarcoLLeite . Are you still experiencing issues with debugging or they are gone after update?

[MarcoLLeite]

Hi @SounD120. Thanks for the help... Yes, after upgrading to 0.59.3 the debugger seems to be back up hitting breakpoints... I haven't said anything because he are still resolving issues related with the upgrade. But that fixed the debugger anyway.

Thanks.

[MarcoLLeite]

Just to point out a few more details of what happens:

On my old version of react-native non of the debugger options would work, no breakpoints would get hit ('Debug Android' and 'Attach to Packager' options).
I only updated react-native to 0.59.3 and kept react on 16.6.3 and both options started to work.
I will also update react, because it triggers warnings on build, but wanted to point out that just updating one helped.

[SounD120]

@MarcoLLeite Thanks for information! I think we'll add information about possible problems with React Native 0.58.* in our documentation.

[h0nor]

• Output of the Debug Console (View -> Toggle Debug Console):

I was having the same problem. Checking the output of the debug console led me in the right direction and I was able to fix the problem.

Cheers @SounD120