React native cannot be debugged in a subdirectory

i7soft commented 5 years ago

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

Cannot enter breakpoints during debugging

Expected Behavior

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

<img width="1112" alt="WeChat7d83c244d24614f1ca9c521c087605b8" src="https://user-images.githubusercontent.com/10511797/63495494-90ae9100-c4f2-11e9-871b-9c8acaf8ebf8.png">

- 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 commented 5 years ago

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 commented 5 years ago

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

i7soft commented 5 years ago

@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 commented 5 years ago

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

i7soft commented 5 years ago

@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 commented 5 years ago

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

i7soft commented 5 years ago

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

i7soft commented 5 years ago

@SounD120 demo and the video are in :

https://github.com/i7soft/reactNativeDemo

SounD120 commented 5 years ago

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?