How to debug with React Native
I think you may have a question at this point.
Master Yoda, How can I use
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
j in the terminal.
› Press j │ open debugger › Press r │ reload app › Press m │ toggle menu
You can explore the
console.log()is used to log information to the console, allowing you to see the value of variables and the flow of your code.
debuggerstatement 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.
Shift + mto "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.
Expo Go React Native Debugger shortcuts
|Command||macOS||Windows / Linux|
|Toggle Developer Tools|
|Reload the app|