For enquiries call:

Phone

+1-469-442-0620

Easter Sale-mobile

HomeBlogWeb DevelopmentDebugging React Native with react-native-debugger

Debugging React Native with react-native-debugger

Published
05th Sep, 2023
Views
view count loader
Read it in
5 Mins
In this article
    Debugging React Native with react-native-debugger

    Debugging in the React Native universe may be done in various ways and with various tools, as React Native is built up of distinct environments (iOS and Android), which means there are a variety of problems to solve with tools to use. Debugging entails a detailed examination of the code and aids in the early detection of errors. 

    Fixing these problems or defects during the React Native app development process rather than during the production stages will save money for any React Native app development company. Thanks to the vast number of contributors to the React Native ecosystem, many debugging tools are available. To get detailed knowledge of React JS concept, opt for React JS online training  and boost your knowledge. 

    What is React Native Debugging?

    Debugging is essential for developing apps and detecting issues. A thorough understanding of debugging techniques enables more rapid and efficient software development. 

    We will go through a couple of debugging approaches in React Native here. We will be developing, running, and debugging our apps with expo-cli, one of the simplest and fastest ways to construct a React Native app. 

    The following are some common react native debugging techniques: 

    • Logging 
    • Debugging in chrome browser 
    • Debugging in visual studio code 

    Logging 

    It is a simple and quick way to debug your software while still in development. It is one of the most straightforward methods for learning how an application works. To log, we just utilize the console.log() instructions to record the appropriate data or indicators. However, we must never forget to remove these console.log() statements before submitting our product to the development phase, as they will only add overhead. 

    Debugging in Chrome Browser 

    We may activate Remote Debugging in our application, which will allow us to debug React Native code in a Chrome browser tab, like how we debug web applications with Chrome developer tools. 

    Debugging in Visual Studio Code 

    We can utilize React Native Tools, a VS Code addon used for debugging React Native projects. Simply create a new file named Launch.json after installing the extension, which will be used to debug the configuration file construction. Finally, we must enable Debug JS Remotely as well as Live Reload. We can now begin debugging with VS Code. 

    Features of React Native Debugger 

    UI Inspector

    You must be aware of element inspector if you are a web developer. The UI Inspector in React Native Debugger works similarly: one can see all the tags used in your app and inspect their styling. You can use the inspector to test your UI and adjust the styling. 

    This is, by far, the most efficient approach to viewing and debugging UI hierarchy in React Native projects. 

    Debug Redux

    You will need a state management library whether you are working on a React or React Native app. Redux is one of the most popular state management libraries on the market. 

    However, especially in React Native, using Redux might be a nuisance if you cannot debug your state. You may use React Native Debugger to debug your Redux-based project easily. You may even debug the current condition in real-time. 

    Until we specifically If we do not use redux devtools in our project, it will not work properly. As seen in the code snippet below, first must enable redux in our app by inserting certain config lines to our App.js file either to our redux main function, to use redux devtools in the react-native-debugger: 

    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; 

    const store = createStore(reducers, /* preloadedState, */ composeEnhancers(middlewares)); 

    If we now reload our RN Debugger tool and perform some activities, we will see the following in the debugger console: 

    Debug Redux

    As you will see, the React Native Debugger exposes the entire Redux state, so users do not need to use breakpoints or console logs to figure out how data flow in the redux system. One incredible feature is the ability to go back in time directly from the debugger to reverse and re-run Redux activities. Another notable feature is the ability to see the exact difference between two state transitions, which is especially useful for projects with many Redux states. 

    Network Inspector

    In general, we may not know what is happening behind the scenes while designing an app that needs to connect to a server. When submitting a request to the server, for example, it may be difficult to track down an issue. Developers typically debug this by printing or alerting error messages; however, this is time-consuming (even though most people do it), as it takes many iterations to comprehend the condition fully. 

    We can easily monitor every inbound and outbound traffic request between the app and the server using the React Native Debugger. 

    AsyncStorage Management

    You can easily print or log your AsyncStorage on the console by running the following command: 

    console.log(showAsyncStorageContentInDev()) 

    This will print or report the AsyncStorage data in the terminal on React Native Debugger. 

    Breakpoints

    The React Native Debugger also allows us to pause the execution job anytime. This will allow developers to inspect data states or understand app activity anytime during the app's lifecycle. 

    How to Debug in React Native?

    1. Run your application in the iOS simulator. 
    2. Press Command + D and a webpage should open at http://localhost:8081/debugger-ui. (Chrome only for now) or use the Shake Gesture 
    3. Enable Pause On Caught Exceptions for a better debugging experience. 
    4. Press Command + Option + I to open the Chrome Developer tools or open it via View -> Developer -> Developer Tools. 
    5. You should now be able to debug as you normally would. 

    Enabling Keyboard Shortcuts

    In the iOS Simulator, React Native supports a few keyboard shortcuts. They are outlined below. To make them work, go to the Hardware menu, pick Keyboard, and check "Connect Hardware Keyboard." 

    Accessing In-App Developer Menu

    Shake your device or pick "Shake Gesture" from the Hardware menu in the iOS Simulator to get to the developer menu. When your app runs in the iOS Simulator, or M when executing in an Android emulator on Mac OS, or Ctrl+M on Windows and Linux, developers can use the D keyboard shortcut. To open the dev menu on an Android device, use the command adb shell input keyevent 82. (82 being the Menu key code). 

    Accessing the In-App Developer Menu

    Reloading JavaScript

    Fast Refresh is a React Native feature that provides near-instant feedback for changes made to your React components. Enabling Fast Refresh when debugging can be beneficial. Fast Refresh is enabled by default, and you may enable it in the React Native developer menu by toggling "Enable Fast Refresh." Most of your adjustments should be displayed within a second or two once you enable it. 

    In-app Errors and Warnings

    In development builds, errors and warnings are presented inside your app. 

    Errors 

    Inside your app, errors are displayed in a full-screen alert with a red background. A RedBox is the name for this type of display. You can manually trigger one using console.error(). 

    Warnings 

    Warnings will have a yellow background on the screen. YellowBoxes are the name for these notifications. To get more information or dismiss the notifications, click on them. 

    A YellowBox can be triggered using console.warn(), much like a RedBox. 

    YellowBoxes can be turned off in the console during development. 

    disableYellowBox=true; By setting an array of prefixes to ignore, certain warnings can be ignored programmatically: 

    import { YellowBox } from ‘react-native’; 

    YelloBox.ignoreWarnings([‘Warning:….’[); 

    Chrome Developer Tools

    Select "Debug JS Remotely" from the Developer Menu in Chrome to debug the JavaScript code. http://localhost:8081/debugger-ui will open in a new tab. 

    To open the Developer Tools, go to the Chrome Menu and select Tools Developer Tools. You can also use keyboard shortcuts to get to the DevTools (I on macOS, Ctrl Shift I on Windows). For a better debugging experience, you might also wish to set Pause On Caught Exceptions. 

     To become a web developer and designer, you will need a perfect guide to get the best knowledge. You can check out our Web Development and Designing course and get a perfect guide to get the best knowledge. 

    One of the drawbacks of utilizing Chrome's DevTools with React Native is that you cannot debug styles or change their properties as you can with web apps. When investigating React's component hierarchy, it is likewise constrained compared to React's devtools. 

    Safari Developer Tools

    You do not need to enable "Debug JS Remotely" to debug the iOS version of your app with Safari. 

    In Safari, go to Preferences Advanced and enable the Develop menu. "Show Develop menu in menu bar" should be selected. 

    Select the JSContext for your app: Develop -> Simulator -> JSContext 

    Safari's Web Inspector, which includes a Console and a Debugger, should open. 

    Although sourcemaps are not enabled by default, you can enable them by following these instructions or seeing this video and setting break points in the proper places in the source code. 

    A new JSContext is created each time the app is reloaded (using live or manually reloading). You can avoid manually selecting the newest JSContext by selecting "Automatically Show Web Inspectors for JSContexts." 

    React Developer Tools

    You must use the desktop app to debug React Native using React's Developer Tools. Simply use the following command to install it globally or locally in your project: 

    yarn add react-devtools 

    or npm: 

    npm install react-devtools --save 

    After that, run yarn react-devtools to activate the app. 

    For these two reasons, React's Developer Tools may be the greatest tool for debugging React Native: 

    • It makes it possible to debug React components. 
    • It allows you to debug React Native styles (my favorite aspect of these development tools!). This feature is included in the latest version and works with the inspector in the developer menu. Writing styles used to be a pain, and you had to wait for the app to reload to see the changes. Now we can debug and implement style properties without reloading the app to see the results. 

    Except for layout, basic state, and characteristics: 

    • Debugging JavaScript is not possible. 
    • Console logs are missing. 
    • There are no breakpoints or exclusions. 

    Although it works with emulated and real devices and is cross-platform, it is a highly specialized debugger. If I needed to debug my layout or determine where a component was getting props wrong, I would use this. 

    The redeeming grace is that it also sets the highlighted component as a variable in Chrome Inspector, allowing you to dump the property's state there. It is quite a clever trick. 

    Unlock endless possibilities with Python! Discover the power of this versatile programming language and land high-paying jobs after completing our Python course. Start your journey today and become a coding maestro. Don't miss out on this opportunity!

    Conclusion

    This article teaches us about the React Native Debugger tool, its installation method, how it works, use-cases, and essential capabilities. It will undoubtedly make any React Native developer's life easier, more productive, and more efficient. Additionally, your apps will be faster and have fewer issues. 

    We strongly advise you to use the React Native Debugger instead of the Chrome Dev Tools because it contains a set of key capabilities that will significantly speed up your work. 

    If you want to get a job as a ReactJS developer or want a hike in your pay slab, then you must check React JS online training KnowledgeHut. It includes 24 hours of live instructor-led training, live projects, assessments, and more.reactjs online training. 

    Frequently Asked Questions (FAQs)

    1How do I debug in React Native?

    To open the Developer Tools, go to the Chrome Menu and select Tools -> Developer Tools. You can also use keyboard shortcuts to get to the DevTools (I on macOS, Ctrl Shift I on Windows). For a better debugging experience, you might also wish to set Pause On Caught Exceptions. 

    2How do I use React Native debugger with Expo?

    After launching React Native Debugger, change the port to 19000 (if using SDK = 39, the port should be 19001). Then, with expo debug start, run your project and select Debug remote JS from the Developer Menu. 

    3How do you see logs in React Native?

    It is a simple and quick approach to debugging your application while it is still in development. It aids in gaining an understanding of how the application works. We may simply utilize the console.log() instructions to log the relevant information or indicators for logging. 

    4How do you debug React Native apps using Expo and Vscode?

    Make sure expo-cli is installed globally. If you do not have it yet, type the following in the terminal to install it: 

    npm install -g expo-cli  

    Select the Expo host parameter that you want to utilize now. If you select Tunnel, you will be prompted to create an Expo account username and password if you have not already done so. If you do not want to register an account, you can use LAN or Tunnel. 

    5Where does React Native debugger install?

    Search on this location. 

    %HOMEPATH%\AppData\Local\react_native_debugger\react-native-debugger.exe 

    By default, it does not install in program files, so you will not be able to find it from the start menu in windows. 

    6How do you debug React Native with React Native debugger?

    To use React Native Debugger with your app, you must first run it and enter debug mode. Shake your phone or press Command + Shift + Z or Ctrl + M and select the debug option to enter debug mode. 

    7How do I open React Native debugger Windows?

    You must first launch your app and enter debug mode before connecting it to React Native Debugger. Shake your phone or press Command + Shift + Z or Ctrl + M and select the debug option to activate debug mode. 

    Profile

    Ishan Jain

    Blog Author

    I am a Full Stack developer from Jaipur. I also work as a Javascript Tutor in my free time. Along with project development, I also write tech blogs.

    Share This Article
    Ready to Master the Skills that Drive Your Career?

    Avail your free 1:1 mentorship session.

    Select
    Your Message (Optional)

    Upcoming Web Development Batches & Dates

    NameDateFeeKnow more
    Course advisor icon
    Course Advisor
    Whatsapp/Chat icon