|
Answer» In the React Native world, debugging may be done in different ways and with different tools, since React Native is composed of different environments (iOS and Android), which means there’s an assortment of problems and a variety of tools needed for debugging. - The Developer Menu:
Reload: reloads the app Debug JS Remotely: opens a channel to a JavaScript debugger Enable Live Reload: makes the app reload automatically on clicking Save Enable Hot Reloading: watches for changes accrued in a changed file Toggle Inspector: toggles an inspector interface, which allows us to inspect any UI element on the screen and its properties, and presents an interface that has other tabs like networking, which shows us the HTTP calls, and a tab for performance.
- Chrome’s DevTools:
Chrome is possibly the first tool to think of for debugging React Native. It’s common to use Chrome’s DevTools to debug web apps, but we can also use them to debug React Native since it’s powered by JavaScript.To use Chrome’s DevTools with React Native, first make sure to connect to the same Wi-Fi, then press command + R if you’re using macOS, or Ctrl + M on Windows/Linux. In the developer menu, choose Debug Js Remotely. This will open the DEFAULT JS debugger. - React Developer Tools
For Debugging React Native using React’s Developer Tools, you need to use the desktop app. In can installed it globally or locally in your project by just running the following command: yarn add react-devtools Or NPM: npm install react-devtools --save
React’s Developer Tools may be the best tool for debugging React Native for these two reasons: It allows for debugging React components. There is also a possibility to debug styles in React Native. There is also a new version that comes with this feature that also WORKS with the inspector in the developer menu. Previously, it was a problem to WRITE styles and have to wait for the app to reload to see the changes. Now we can debug and implement style properties and see the effect of the change instantly without reloading the app. - React Native Debugger
While using Redux in your React Native app, React Native Debugger is probably the right debugger for you. This is a standalone desktop app that works on macOS, Windows, and Linux. It even integrates both Redux’s DevTools and React’s Developer Tools in ONE app so you don’t have to work with two separate apps for debugging.
React Native CLI You can use the React Native CLI to do some debugging as well. It can also be used for showing the logs of the app. Hitting react-native log-android will show you the logs of db logcat on Android, and to view the logs in iOS you can run react-native log-ios, and with console.log you can dispatch logs to the terminal: console.log("some error🛑")
|