I used npx react-native init MyAppName to initialize a brand new React Native venture and acquired the assorted dependencies working, so I can run the app within the iOS simulator, the Android simulator, and on a bodily Android telephone.
What I can not seem to do is determine find out how to set a breakpoint. For context, I am utilizing WebStorm and it would be superior to only set a breakpoint within the IDE, however I would accept setting a breakpoint by way of an inspector (e.g., Chrome correct or the Electron variant).
What I can do is add “debugger;” within the code and that’ll be hit (not in WebStorm although), however then it appears to get hit each time after that too (so I can not simply disable it like a traditional breakpoint). I’ve seen varied posts on-line say to allow a “JS Debugger”, however that possibility now not appears to be current within the improvement menu (maybe that was eliminated/renamed sooner or later).
Some extra context is that I modified my bundle.json like this:
"begin": "react-native begin --experimental-debugger",
That’s, I added the --experimental-debugger flag, as I learn someplace that that’s the solution to do issues going ahead.
I assumed maybe exhibiting the component inspector would permit me to choose and component and possibly it’d spotlight the code for that component, however once I try to take action I get an error:
I additionally tried npx react-devtools and that opened this Electron window:
Nonetheless, I do not see something in there that enables me to set breakpoints within the TypeScript.
And once I sort “j” within the terminal to open the experiment Hermes solely debugger, I see this:
That does not appear to permit me to browse code to set a breakpoint (there is not a lot to do within the “Sources” tab). After I add that debugger; line I discussed, that is the place it opens (however once more, it is an ungainly expertise since I can not take away that line simply whereas actively debugging).
Right here is my total bundle.json for reference:
{
"title": "NameRedacted",
"model": "0.0.1",
"personal": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"begin": "react-native begin --experimental-debugger",
"check": "jest"
},
"dependencies": {
"react": "18.2.0",
"react-native": "0.73.6"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native/babel-preset": "0.73.21",
"@react-native/eslint-config": "0.73.2",
"@react-native/metro-config": "0.73.5",
"@react-native/typescript-config": "0.73.1",
"@react-navigation/native": "^6.1.17",
"@react-navigation/native-stack": "^6.9.26",
"@sorts/react": "^18.2.6",
"@sorts/react-test-renderer": "^18.0.0",
"babel-jest": "^29.6.3",
"eslint": "^8.19.0",
"jest": "^29.6.3",
"prettier": "2.8.8",
"react-native-safe-area-context": "^4.9.0",
"react-native-screens": "^3.29.0",
"react-test-renderer": "18.2.0",
"typescript": "5.0.4"
},
"engines": {
"node": ">=18"
}
}
Model data:
- Node v20.11.1.
- macOS Sonoma 14.3.1 on a MacBook with Apple Silicon (M3 Professional).
Whereas a lot of React Native is declarative, there may be nonetheless loads of crucial code I would prefer to set breakpoints on. Anyone understand how I can try this in a extra easy manner than my wonky workaround?
