I am new to React Native. I am stuck with debugging. What is the standard way of debugging apps? I mean how should I configure WebStorm debugger for it to connect to the running app and stop on breakpoints I put in IDE?
And is there a way to use WebStorm debugger alongside Flipper (use it instead of Chrome)?
I currently use RN 0.70.6
Related
I'm tasked with an already-started project that has React Native Reanimated library as a dependency.
Whenever I debug my app with Vscode/Chrome debugger, when I navigate to any screen that has components depending on Reanimated, I keep getting global.performance.now is not a function.
I've already seen TypeError: global.performance.now is not a function in react native but in the latest version it is already changed to what the accepted answer to the question suggests.
I've tried downgrading react-native-reanimated to 2.2.4 and patch as suggested in the answer, yet then I start getting all sorts of errors like Property ' stopObservingProgress' doesn't exist.
I've also tried 2.3.1, also different yet blocker errors.
I've also tried with and without Hermes.
Disabling debugging gets rid of the error, but I (obviously) can't debug. Debugging with Flipper works yet debugging with Flipper is extremely slowing my workflow (e.g. switching between Vscode and Flipper and trying to find files to put breakpoints, unable to edit at the same place where I debug etc. Flipper is just not my thing) and I want to debug with Vscode, which works perfectly without Reanimated.
I want to get rid of Reanimated library but unfortunately there is already a lot of code that relies on it, including a library with no other alternative that directly depends on Reanimated.
How can I debug an app containing React Native Reanimated with Vscode?
It's still a known and open issue when we are using reanimated version 2.., you can find this in reanimated documation.
As the library uses JSI for synchronous native methods access, remote debugging is no longer possible. You can use Flipper for debugging your JS code, however connecting debugger to JS context which runs on the UI thread is not currently supported.
For now only flipper is the way of debugging react native apps that using JSI for syncronous native module calls.
Okay after further investigation I've found out that this is indeed possible. There were some other problems with latest versions of some of the dependencies that I've been using, which was masking the original issue. With the right combination of dependencies and following https://fbflipper.com/docs/extending/debugging/ and https://thinhtran3588.medium.com/make-professional-mobile-apps-with-react-native-and-typescript-debug-your-application-with-vscode-fba067f77445 I was able to debug my app correctly using Vscode debugger.
I am using both the Flipper and React Native Debugger on a React Native project.
I find JavaScript logging by React Native Debugger to be much richer given JSON formatting than Flipper (logs dumped as serialized strings). I however love the additional log tooling(especially for native logs) that Flipper provides.
Is it possible to setup choose the default Dev tool?
Opening the dev tools on the iOS simulator, all logs open with Flipper even if it was quit and the React Native Debugger was already open.
I have tried to configure a different port listened to by the debugger and dev tools but a flipper is still given the lead.
Has anyone tried to you both successfully?
Not tried but seems like this article can help you out:
Medium
Already given on React-Native official doc to setup default debugging tool.
If nothing messed up with your local setting then simple disabling can help.
I use React Native Debugger but it has its limitation so can anyone guide me with the bare minimum on how to start debugging using Facebook Flipper and even is it worth it to use?
My main requirement is to be able to monitor the Network and Database of React Native app.
please go through below points for debug react native app using flipper.
React Native version should be latest.
Install desktop app for flipper in window and mac(If you are using mac than may be ask for some permission).
Open flipper and run react native project.
Finally If you see in flipper than you project dom tree is showing in react dev tool.Below I attached screenshot for react dev tools using flipper.
Note:- Flipper provide more feature like inspect network request, layout, you can check react native log and native logs(for ios and android).It is more easy just follow above steps.
So I have a React Native app based on react-native-firebase-starter that I'd like to debug using better tools than just console.log output via react-native log-android. Debugger breakpoints, object inspection etc.
For a standard React Native app, this would be possible using the "Debug JS remotely" option which, as I understand it, runs the app's JS inside desktop Chrome and hence can use it's dev tools.
This does not seem to work for React Native Firebase however. I presume this is because it uses a lot of native Android/iOS modules along with mobile-only Firebase auth, and thus is only happy running entirely on the device. ...or something like that.
Am I doing something wrong or is there a way round this? What debugging setup will give me the best DX here?
The example project react-native-firebase-starter is natively built (as opposed to being created with Expo) and will therefore work as expected with the debugging tools you have mentioned.
Make sure when running the app the build variant Debug is selected, as in Release mode Metro Bundler / Packager and the debugging tools are not available.
If the debugging level via Chrome Dev Tools does not suffice, there are other tools created for React Native with better functionality (such as breakpointing). The most notable ones are:
React Native Tools extension for Visual Studio Code. Allows setting breakpoints and iterating through code in the editor.
React Native Debugger, which has a similar interface to Chrome Dev Tools and allows breakpoints to be set in the Sources tab.
Up-to-date installation instructions and configuration are provided in their respective repositories.
Is there any good document/video that talks about how to debug a react-native application using Nuclide.
Am a newbie. Its my first time app development and first time with React.
I did create the project using react-native init. I don't think i found a BUCK file for me to run and debug my app. I also don't see to get how to view the errors in my JS file. I have to run the simulator to see. I run it using react-native run-ios.
I tried Nuclide->React Native->Start Debugging. Not sure what this is supposed to do.
Sorry if these questions sound silly.
According to this instruction you should:
From the command Palette (Cmd-Shift-P) choose "Nuclide React Native: Start Packager" to start the React Native Server.
Ensure that you are in the root directory of the React Native project, then run the application from the command-line: "$ react-native run-ios" (or choose other existing simulator, for example react-native run-ios --simulator="iPhone4s").
After starting the server, you can prime the React Native Debugger for when the application begins running. From the command Palette (Cmd-Shift-P), launch "Nuclide React Native: Start Debugging".
From the Simulator press Cmd-D (Ctrl-D on Linux). This will bring up the debug options for your application. Select "Debug JS Remotely.
...After you enable debugging from the simulated application, Nuclide will attach to that debugging process automatically, since we primed the Debugger above.
Debug JS in Nuclide is now an option in the dev menu added in React Native version 0.52 December 2017 release.
See This