Vscode-react-native: React native cannot be debugged in a subdirectory

[i7soft]

Folder structure

├ project
----├ .vscode
--------├ launch.json
--------├ settings.json
----├ platform
--------├ mobileReactNative ☜ react native root
------------├ index.js

settings.json has set the react-native-toos.projectRoot like this:

{
    "react-native-tools":{
        "projectRoot":"./platform/mobileReactNative"
    },
    "react-native-tools.projectRoot": "./platform/mobileReactNative"
}

./platform/mobileReactNative/index.js :

var ReactNative=require('react-native');

console.log('hello bobo');

var AppRegistry=ReactNative.AppRegistry;

import Loader from './Loader';
import {name as appName} from './app.json';


AppRegistry.registerComponent(appName, ()=>Loader);

Actual Behavior

1. Cannot enter breakpoints during debugging
2.

Expected Behavior

1. 
   
   
   2.
   

Software versions

• React-Native VS Code extension version: 0.10.2
• VSCode version: 1.37.1
• OS platform and version: Mac 10.14.6
• NodeJS version: 10.11.0
• React Native version: 0.60
• Expo SDK version (include if relevant):

Outputs (Include if relevant)

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

Invalidating <RCTCxxBridge: 0x7f8a40d4b300> (parent: <RCTBridge: 0x6040000d6b90>, executor: RCTWebSocketExecutor)
RCTLog.js:47
调试器辅助进程在端口 32500 上已加载运行时
hello bobo
index.bundle:1004
Running application mobileReactNative ({
    initialProps =     {
    };
    rootTag = 31;
})
RCTLog.js:47
Running application "mobileReactNative" with appParams: {"rootTag":31,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
infoLog.js:16

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

info Starting custom debugger by executing:, echo A debugger is not needed:  "/Users/shiqiren/MC/NewBest/project/platform/mobileReactNative"
 BUNDLE  [ios, dev] ./index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (1/1), done.

 BUNDLE  [ios, dev] ./index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (1/1), done.

 MAP  [ios, dev] ./index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (1/1), done.

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

nothing

[ruslan-bikkinin]

Hi @i7soft and thanks for reporting. Please try the following steps and let us know if it helps:

• Update the extension to v0.11.0;
• Add "cwd": "${workspaceFolder}/platform/mobileReactNative" to the debug configuration you use in project/.vscode/launch.json.

[SounD120]

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

[i7soft]

@ruslan-bikkinin @SounD120 thank you for the help.
I have upgraded to 0.11.0, but when I debug ios, I canot enter the breakpoint too. I can only see the debug information with "console.log". In andorid, the debug information with "console.log" is only displayed in LogCat.

[SounD120]

@i7soft Have you tried to put breakpoints in other files except index.js? Does debugging work there?

[i7soft]

@SounD120 In ios, still can't debug, in index.js too, but I found that I can hit other breakpoints (the code for these breakpoints is executed after the app has run for a few minutes)

[SounD120]

Hi @i7soft . Could you please share a demo application and indicate where you set breakpoints that don't work?

[i7soft]

@SounD120 Ok, I will provide a demo and then record a video.

[i7soft]

@SounD120 demo and the video are in :

https://github.com/i7soft/reactNativeDemo

[SounD120]

Hi @i7soft . Could you please try to add debugger; string at the top of your app.js file and let us know how it works for you?

[i7soft]

@SounD120 After add debugger; string at the top of app.js file, it can enter breakpoints in iOS,but still not work in Android

[SounD120]

Hi @i7soft . I investigated the issue and proposed a fix for that. Could you please try it and let us know how it works for you? To do that please do the following:

• Download and unzip compiled extension VSIX from fix-breakpoints-issue
  branch: vscode-react-native-0.11.1.vsix.zip
• Uninstall extension
• Close VS Code
• Open VS Code
• Click Extensions -> ... -> Install from VSIX... and select downloaded VSIX

[i7soft]

Hi @i7soft . I investigated the issue and proposed a fix for that. Could you please try it and let us know how it works for you? To do that please do the following:

• Download and unzip compiled extension VSIX from fix-breakpoints-issue
  branch: vscode-react-native-0.11.1.vsix.zip
• Uninstall extension
• Close VS Code
• Open VS Code
• Click Extensions -> ... -> Install from VSIX... and select downloaded VSIX

i try this. ios can enter breakpoints,in android still not work

[SounD120]

Hi @i7soft . As seen from your video in https://github.com/i7soft/reactNativeDemo repository, it looks like Remote JS Debug is disabled on Android emulator. Could you please try to enable it and let us know how debugging works with new extension version?
To do that please do the following:

1. Start Debug Android debug scenario and wait when application is built
2. Run adb shell input keyevent 82 command in terminal to open React Native developer menu inside the app
3. Enable Remote JS Debug

[i7soft]

@SounD120 thanks,it is work!!!!!!!!!!
add debugger; string at the top of app.js file is need

[SounD120]

@i7soft Have you tried new extension version with a fix https://github.com/microsoft/vscode-react-native/issues/1081#issuecomment-533490551 ? It should work without debugger; string at the top of App.js file. Could you please try it and let us know how it works for you?

[i7soft]

0.11.1is work without debugger;string @SounD120
🎉🎉🎉🎉🎉

[SounD120]

@i7soft Glad to hear it. This fix will be released as a part of new extension version. We'll let you know when it comes out.

[i7soft]

@SounD120 Thank you for your work~👍

[SounD120]

Hi @i7soft. React Native Tools v0.12.0 with a fix for that has been released.