How to debug with React Native

Debug React Native like a Jedi master

I think you may have a question at this point.

Master Yoda, How can I use debugger, console.log(), and React Developer Tools?

📡 What you will learn

  • Learn how to debug your React Native project.
  • Simulate network condition.

👾 Before we start the exercise

  • Google Chrome needs to be installed on your machine.

👨‍🚀 Exercise 01

Like websites, you can use Chrome DevTools to debug the JavaScript code of your app. You can launch it with j in the terminal.

› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu

javascript source using Hermes

You can explore the JavaScript source code of your app, set breakpoints, and inspect variables.

Debugging JavaScript

There are 2 most common ways to debug JavaScript in Chrome DevTools:

  • console.log() is used to log information to the console, allowing you to see the value of variables and the flow of your code.
  • The debugger statement is used to pause your code and inspect it in real-time using the DevTools debugger.

Try to use them both in your app. debugger is super useful to inspect the state of your app.

Debugging React with React Developer Tools

The React Developer Tools extension for Chrome and Firefox lets you inspect a React component tree with your browser’s developer tools.

javascript source using Hermes

  • Use Shift + m to "Start React devtools"
  • Inspect your React component tree and change the Text from your button.

Testing your app with bad network

  • Simulate a network connection
    • Go to the Network tab of your React Native debugger.
    • You can simulate a network connection by clicking on the “No throttling” dropdown.
    • You can choose among presets such as 2G or 3G.

Simulate bad network condition

Expo Go React Native Debugger shortcuts

CommandmacOSWindows / Linux
Toggle Developer Toolscontrol + command + zctrl + alt + z
Reload the apprr

👽 Bonus