React native debugger is a desktop application that runs on macOS, Windows, and Linux. It provides a Redux DevTools interface for viewing Redux logs and actions, as well as a React Developer Tools interface for inspecting and debugging React elements.
React Native Introduction:
Debugging is the process of detecting and removing bugs in software that causes unexpected behavior or crashing of the software.
If the software or the application behaves in an unintended way or an unusual crashing of the application leads to bugs in the software.
A software bug is an error or fault in the software program that leads to unexpected results. With the help of debugging, a developer can debug the code and find the code causing issues.
Debugging In React Native
In-Built React Native Debugger
Opening a React Native debugger takes only a few steps. Once the project starts and running, in the terminal if you press D which stands for Developer menu. It will open a menu in your Android Emulator or iOS Simulator.
There are different options in the app that include Reload, Debug, etc…
This is one of react native’s official remote debugger features where you can manually reload the app for changes. For instance, while installing any external package, instead of restarting the app, this reloads feature helps to get the latest changes.
Chrome Developer Tools:
The Debug button opens the chrome Developer tools where the developer can debug and get the logger outputs.
The console shows different errors, warnings, and logs that are in the code. With the help of these, the developer can know exactly what’s happening behind the code.
This is the basic in-build debugger that comes with React Native. This is only for basic testing and debugging the code.
Your project might have warnings and errors. These errors and warnings are displayed in a log box inside your app.
The errors and warnings are also represented in the mobile app. The warnings are represented with a Yellow background with all the list of warnings in the code. If there is an error in the application, the app shows an error in the red background with all the errors.
React Native Standalone Debugger
This is a standalone installer for React Native based on React Native’s official Remote JS Debugger but with more functionality.
React Native debugger can be downloaded from the official GitHub releases page. The windows executable and Linux executable files are included.
This debugger can be installed using Homebrew using MacOS. The instructions for installation were given on the debugger’s official page.
React Native Standalone debugger comes with many features that are helpful for any type of react native project. The debugger includes Redux Devtools, React Devtools, Viewing component structure, Component State, Network Tab, Source Tab, Console Tab.
The debugger didn’t miss any tools that are useful for the developer. The tools that are included in the software are very necessary for debugging a react native application.
Using React Native Debugger in your Project:
Download and Install the latest version of React Native debugger from the official GitHub releases page.
Close all the other debuggers while running the react-native standalone program. Then start the project and run the project in your android emulator or simulator.
React Native debugger might take a few seconds to connect with the application. Once the debugger is connected, it displays all the necessary information for the React native developer to debug.
This is the tab where all your errors, warnings, and logging happens. You can console log a particular value, object, or result.
The console tab is very useful to debug the output of the code. It shows the expected results by console logging the values we need.
Once you open the file in the source tab, select the lines you wanna debug and you can start debugging the code.
This is one of the best features of a react-native debugger. All the components can be seen as DOM elements using this tool. You can select the particular component to get the local state values, debug the component, etc…
Debugging made it easy with the help of this feature. Developers are now able to view what data is present inside the component’s state before even looking into the UI. This helps developers to find and fix any problems related to data.
Redux Developer Tools:
React Native developer tools come with Redux dev tools. This is one of the most useful features for react native developers.
React developer tools can be easily installed using a chrome extension for react web applications but for mobile the component global state can not be monitored.
With the help of Redux dev tools, developers now are able to view the global state data which is very useful for debugging the component.
The Redux dev tools come with Actions, State, etc… This is as similar as the web including all the features. The action tab is able to view all the actions performed during the app and the state tab used for viewing the global state data.
Apollo GraphQl Client Integration:
React Dev tools for react native also come with Apollo Graphql integration. This enables developers to query data instantly from the debugger and debug the data.
This is very useful for debugging complex applications. To ensure it works in this debugger, you also need to install the latest Apollo Client version.
The client has GraphQl to send queries to the server directly from the web application and this can also cache the data.