Explore Courses
Liverpool Business SchoolLiverpool Business SchoolMBA by Liverpool Business School
  • 18 Months
Bestseller
Golden Gate UniversityGolden Gate UniversityMBA (Master of Business Administration)
  • 15 Months
Popular
O.P.Jindal Global UniversityO.P.Jindal Global UniversityMaster of Business Administration (MBA)
  • 12 Months
New
Birla Institute of Management Technology Birla Institute of Management Technology Post Graduate Diploma in Management (BIMTECH)
  • 24 Months
Liverpool John Moores UniversityLiverpool John Moores UniversityMS in Data Science
  • 18 Months
Popular
IIIT BangaloreIIIT BangalorePost Graduate Programme in Data Science & AI (Executive)
  • 12 Months
Bestseller
Golden Gate UniversityGolden Gate UniversityDBA in Emerging Technologies with concentration in Generative AI
  • 3 Years
upGradupGradData Science Bootcamp with AI
  • 6 Months
New
University of MarylandIIIT BangalorePost Graduate Certificate in Data Science & AI (Executive)
  • 8-8.5 Months
upGradupGradData Science Bootcamp with AI
  • 6 months
Popular
upGrad KnowledgeHutupGrad KnowledgeHutData Engineer Bootcamp
  • Self-Paced
upGradupGradCertificate Course in Business Analytics & Consulting in association with PwC India
  • 06 Months
OP Jindal Global UniversityOP Jindal Global UniversityMaster of Design in User Experience Design
  • 12 Months
Popular
WoolfWoolfMaster of Science in Computer Science
  • 18 Months
New
Jindal Global UniversityJindal Global UniversityMaster of Design in User Experience
  • 12 Months
New
Rushford, GenevaRushford Business SchoolDBA Doctorate in Technology (Computer Science)
  • 36 Months
IIIT BangaloreIIIT BangaloreCloud Computing and DevOps Program (Executive)
  • 8 Months
New
upGrad KnowledgeHutupGrad KnowledgeHutAWS Solutions Architect Certification
  • 32 Hours
upGradupGradFull Stack Software Development Bootcamp
  • 6 Months
Popular
upGradupGradUI/UX Bootcamp
  • 3 Months
upGradupGradCloud Computing Bootcamp
  • 7.5 Months
Golden Gate University Golden Gate University Doctor of Business Administration in Digital Leadership
  • 36 Months
New
Jindal Global UniversityJindal Global UniversityMaster of Design in User Experience
  • 12 Months
New
Golden Gate University Golden Gate University Doctor of Business Administration (DBA)
  • 36 Months
Bestseller
Ecole Supérieure de Gestion et Commerce International ParisEcole Supérieure de Gestion et Commerce International ParisDoctorate of Business Administration (DBA)
  • 36 Months
Rushford, GenevaRushford Business SchoolDoctorate of Business Administration (DBA)
  • 36 Months
KnowledgeHut upGradKnowledgeHut upGradSAFe® 6.0 Certified ScrumMaster (SSM) Training
  • Self-Paced
KnowledgeHut upGradKnowledgeHut upGradPMP® certification
  • Self-Paced
IIM KozhikodeIIM KozhikodeProfessional Certification in HR Management and Analytics
  • 6 Months
Bestseller
Duke CEDuke CEPost Graduate Certificate in Product Management
  • 4-8 Months
Bestseller
upGrad KnowledgeHutupGrad KnowledgeHutLeading SAFe® 6.0 Certification
  • 16 Hours
Popular
upGrad KnowledgeHutupGrad KnowledgeHutCertified ScrumMaster®(CSM) Training
  • 16 Hours
Bestseller
PwCupGrad CampusCertification Program in Financial Modelling & Analysis in association with PwC India
  • 4 Months
upGrad KnowledgeHutupGrad KnowledgeHutSAFe® 6.0 POPM Certification
  • 16 Hours
O.P.Jindal Global UniversityO.P.Jindal Global UniversityMaster of Science in Artificial Intelligence and Data Science
  • 12 Months
Bestseller
Liverpool John Moores University Liverpool John Moores University MS in Machine Learning & AI
  • 18 Months
Popular
Golden Gate UniversityGolden Gate UniversityDBA in Emerging Technologies with concentration in Generative AI
  • 3 Years
IIIT BangaloreIIIT BangaloreExecutive Post Graduate Programme in Machine Learning & AI
  • 13 Months
Bestseller
IIITBIIITBExecutive Program in Generative AI for Leaders
  • 4 Months
upGradupGradAdvanced Certificate Program in GenerativeAI
  • 4 Months
New
IIIT BangaloreIIIT BangalorePost Graduate Certificate in Machine Learning & Deep Learning (Executive)
  • 8 Months
Bestseller
Jindal Global UniversityJindal Global UniversityMaster of Design in User Experience
  • 12 Months
New
Liverpool Business SchoolLiverpool Business SchoolMBA with Marketing Concentration
  • 18 Months
Bestseller
Golden Gate UniversityGolden Gate UniversityMBA with Marketing Concentration
  • 15 Months
Popular
MICAMICAAdvanced Certificate in Digital Marketing and Communication
  • 6 Months
Bestseller
MICAMICAAdvanced Certificate in Brand Communication Management
  • 5 Months
Popular
upGradupGradDigital Marketing Accelerator Program
  • 05 Months
Jindal Global Law SchoolJindal Global Law SchoolLL.M. in Corporate & Financial Law
  • 12 Months
Bestseller
Jindal Global Law SchoolJindal Global Law SchoolLL.M. in AI and Emerging Technologies (Blended Learning Program)
  • 12 Months
Jindal Global Law SchoolJindal Global Law SchoolLL.M. in Intellectual Property & Technology Law
  • 12 Months
Jindal Global Law SchoolJindal Global Law SchoolLL.M. in Dispute Resolution
  • 12 Months
upGradupGradContract Law Certificate Program
  • Self paced
New
ESGCI, ParisESGCI, ParisDoctorate of Business Administration (DBA) from ESGCI, Paris
  • 36 Months
Golden Gate University Golden Gate University Doctor of Business Administration From Golden Gate University, San Francisco
  • 36 Months
Rushford Business SchoolRushford Business SchoolDoctor of Business Administration from Rushford Business School, Switzerland)
  • 36 Months
Edgewood CollegeEdgewood CollegeDoctorate of Business Administration from Edgewood College
  • 24 Months
Golden Gate UniversityGolden Gate UniversityDBA in Emerging Technologies with Concentration in Generative AI
  • 36 Months
Golden Gate University Golden Gate University DBA in Digital Leadership from Golden Gate University, San Francisco
  • 36 Months
Liverpool Business SchoolLiverpool Business SchoolMBA by Liverpool Business School
  • 18 Months
Bestseller
Golden Gate UniversityGolden Gate UniversityMBA (Master of Business Administration)
  • 15 Months
Popular
O.P.Jindal Global UniversityO.P.Jindal Global UniversityMaster of Business Administration (MBA)
  • 12 Months
New
Deakin Business School and Institute of Management Technology, GhaziabadDeakin Business School and IMT, GhaziabadMBA (Master of Business Administration)
  • 12 Months
Liverpool John Moores UniversityLiverpool John Moores UniversityMS in Data Science
  • 18 Months
Bestseller
O.P.Jindal Global UniversityO.P.Jindal Global UniversityMaster of Science in Artificial Intelligence and Data Science
  • 12 Months
Bestseller
IIIT BangaloreIIIT BangalorePost Graduate Programme in Data Science (Executive)
  • 12 Months
Bestseller
O.P.Jindal Global UniversityO.P.Jindal Global UniversityO.P.Jindal Global University
  • 12 Months
WoolfWoolfMaster of Science in Computer Science
  • 18 Months
New
Liverpool John Moores University Liverpool John Moores University MS in Machine Learning & AI
  • 18 Months
Popular
Golden Gate UniversityGolden Gate UniversityDBA in Emerging Technologies with concentration in Generative AI
  • 3 Years
Rushford, GenevaRushford Business SchoolDoctorate of Business Administration (AI/ML)
  • 36 Months
Ecole Supérieure de Gestion et Commerce International ParisEcole Supérieure de Gestion et Commerce International ParisDBA Specialisation in AI & ML
  • 36 Months
Golden Gate University Golden Gate University Doctor of Business Administration (DBA)
  • 36 Months
Bestseller
Ecole Supérieure de Gestion et Commerce International ParisEcole Supérieure de Gestion et Commerce International ParisDoctorate of Business Administration (DBA)
  • 36 Months
Rushford, GenevaRushford Business SchoolDoctorate of Business Administration (DBA)
  • 36 Months
Liverpool Business SchoolLiverpool Business SchoolMBA with Marketing Concentration
  • 18 Months
Bestseller
Golden Gate UniversityGolden Gate UniversityMBA with Marketing Concentration
  • 15 Months
Popular
Jindal Global Law SchoolJindal Global Law SchoolLL.M. in Corporate & Financial Law
  • 12 Months
Bestseller
Jindal Global Law SchoolJindal Global Law SchoolLL.M. in Intellectual Property & Technology Law
  • 12 Months
Jindal Global Law SchoolJindal Global Law SchoolLL.M. in Dispute Resolution
  • 12 Months
IIITBIIITBExecutive Program in Generative AI for Leaders
  • 4 Months
New
IIIT BangaloreIIIT BangaloreExecutive Post Graduate Programme in Machine Learning & AI
  • 13 Months
Bestseller
upGradupGradData Science Bootcamp with AI
  • 6 Months
New
upGradupGradAdvanced Certificate Program in GenerativeAI
  • 4 Months
New
KnowledgeHut upGradKnowledgeHut upGradSAFe® 6.0 Certified ScrumMaster (SSM) Training
  • Self-Paced
upGrad KnowledgeHutupGrad KnowledgeHutCertified ScrumMaster®(CSM) Training
  • 16 Hours
upGrad KnowledgeHutupGrad KnowledgeHutLeading SAFe® 6.0 Certification
  • 16 Hours
KnowledgeHut upGradKnowledgeHut upGradPMP® certification
  • Self-Paced
upGrad KnowledgeHutupGrad KnowledgeHutAWS Solutions Architect Certification
  • 32 Hours
upGrad KnowledgeHutupGrad KnowledgeHutAzure Administrator Certification (AZ-104)
  • 24 Hours
KnowledgeHut upGradKnowledgeHut upGradAWS Cloud Practioner Essentials Certification
  • 1 Week
KnowledgeHut upGradKnowledgeHut upGradAzure Data Engineering Training (DP-203)
  • 1 Week
MICAMICAAdvanced Certificate in Digital Marketing and Communication
  • 6 Months
Bestseller
MICAMICAAdvanced Certificate in Brand Communication Management
  • 5 Months
Popular
IIM KozhikodeIIM KozhikodeProfessional Certification in HR Management and Analytics
  • 6 Months
Bestseller
Duke CEDuke CEPost Graduate Certificate in Product Management
  • 4-8 Months
Bestseller
Loyola Institute of Business Administration (LIBA)Loyola Institute of Business Administration (LIBA)Executive PG Programme in Human Resource Management
  • 11 Months
Popular
Goa Institute of ManagementGoa Institute of ManagementExecutive PG Program in Healthcare Management
  • 11 Months
IMT GhaziabadIMT GhaziabadAdvanced General Management Program
  • 11 Months
Golden Gate UniversityGolden Gate UniversityProfessional Certificate in Global Business Management
  • 6-8 Months
upGradupGradContract Law Certificate Program
  • Self paced
New
IU, GermanyIU, GermanyMaster of Business Administration (90 ECTS)
  • 18 Months
Bestseller
IU, GermanyIU, GermanyMaster in International Management (120 ECTS)
  • 24 Months
Popular
IU, GermanyIU, GermanyB.Sc. Computer Science (180 ECTS)
  • 36 Months
Clark UniversityClark UniversityMaster of Business Administration
  • 23 Months
New
Golden Gate UniversityGolden Gate UniversityMaster of Business Administration
  • 20 Months
Clark University, USClark University, USMS in Project Management
  • 20 Months
New
Edgewood CollegeEdgewood CollegeMaster of Business Administration
  • 23 Months
The American Business SchoolThe American Business SchoolMBA with specialization
  • 23 Months
New
Aivancity ParisAivancity ParisMSc Artificial Intelligence Engineering
  • 24 Months
Aivancity ParisAivancity ParisMSc Data Engineering
  • 24 Months
The American Business SchoolThe American Business SchoolMBA with specialization
  • 23 Months
New
Aivancity ParisAivancity ParisMSc Artificial Intelligence Engineering
  • 24 Months
Aivancity ParisAivancity ParisMSc Data Engineering
  • 24 Months
upGradupGradData Science Bootcamp with AI
  • 6 Months
Popular
upGrad KnowledgeHutupGrad KnowledgeHutData Engineer Bootcamp
  • Self-Paced
upGradupGradFull Stack Software Development Bootcamp
  • 6 Months
Bestseller
KnowledgeHut upGradKnowledgeHut upGradBackend Development Bootcamp
  • Self-Paced
upGradupGradUI/UX Bootcamp
  • 3 Months
upGradupGradCloud Computing Bootcamp
  • 7.5 Months
PwCupGrad CampusCertification Program in Financial Modelling & Analysis in association with PwC India
  • 5 Months
upGrad KnowledgeHutupGrad KnowledgeHutSAFe® 6.0 POPM Certification
  • 16 Hours
upGradupGradDigital Marketing Accelerator Program
  • 05 Months
upGradupGradAdvanced Certificate Program in GenerativeAI
  • 4 Months
New
upGradupGradData Science Bootcamp with AI
  • 6 Months
Popular
upGradupGradFull Stack Software Development Bootcamp
  • 6 Months
Bestseller
upGradupGradUI/UX Bootcamp
  • 3 Months
PwCupGrad CampusCertification Program in Financial Modelling & Analysis in association with PwC India
  • 4 Months
upGradupGradCertificate Course in Business Analytics & Consulting in association with PwC India
  • 06 Months
upGradupGradDigital Marketing Accelerator Program
  • 05 Months

React Native Debugging: Techniques, Tools, How to Use it?

Updated on 25 October, 2024

23.02K+ views
5 min read

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. React Native 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. 

What is React Native Debugging?

React native debugging is essential for developing apps. It is a process of identifying, detecting and fixing bugs or issues. A thorough understanding of debugging techniques like Chrome developer tools or React Native Debugger 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. 

React Native Debugging Techniques

The following are some common react native debugging techniques: 

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

1. 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. 

2. 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. 

3. 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. 

Professional online programmes like the Full Stack Software Development Bootcamp from upGrad offer extensive knowledge about tools like the React debugger to develop error-free programs and applications.

Features of React Native Debugger 

Here are the features of React Native Debugger

1. 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. 

2. 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: 

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. 

3. 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. 

4. 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. 

5. 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. 

Check Out upGrad’s Software Development Courses to upskill yourself.

How to Debug React Native App? [Step-by-Step]

Step 1: Run your application in the iOS simulator. 

Step 2: Press Command + D and a webpage should open at http://localhost:8081/debugger-ui. (Chrome only for now) or use the Shake Gesture 

Step 3: Enable Pause On Caught Exceptions for a better debugging experience. 

Step 4: Press Command + Option + I to open the Chrome Developer tools or open it via View -> Developer -> Developer Tools. 

Step 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). 

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:….’[); 

React Native Debugging: 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 react native debugging experience, you might also wish to set Pause On Caught Exceptions. 

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. 

  1. In Safari, go to Preferences Advanced and enable the Develop menu. "Show Develop menu in menu bar" should be selected. 
  2. Select the JSContext for your app: Develop -> Simulator -> JSContext 
  3. Safari's Web Inspector, which includes a Console and a Debugger, should open. 
  4. 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. 
  5. 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 for Debug React Native

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. 

Conclusion

This article teaches us about the React Native debugging, 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. 

You can reinforce your resume as a full-stack developer by pursuing courses like Full Stack Software Development Bootcamp and AI Powered FSD Course by IIITB. These courses impart the in-demand full-stack development skills that help you explore outstanding job opportunities like full-stack developer, frontend developer, backend developer, and UI developer.

Boost your software engineering skills with our top programs. Explore the courses below to find the right fit

Master in-demand software skills with our specialized courses. Explore your options below to upskill today

Frequently Asked Questions (FAQs)

1. How 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. 

2. How 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. 

3. How 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. 

4. How 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. 

5. Where does React Native debugger install?

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. 

7. How 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. 

RELATED PROGRAMS