React native android debugger

Debugging

Accessing the In-App Developer Menu​

You can access the developer menu by shaking your device or by selecting «Shake Gesture» inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator on Mac OS and Ctrl+M on Windows and Linux. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

The Developer Menu is disabled in release (production) builds.

Enabling Fast Refresh​

Fast Refresh is a React Native feature that allows you to get near-instant feedback for changes in your React components. While debugging, it can help to have Fast Refresh enabled. Fast Refresh is enabled by default, and you can toggle «Enable Fast Refresh» in the React Native developer menu. When enabled, most of your edits should be visible within a second or two.

Enabling Keyboard Shortcuts​

React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that «Connect Hardware Keyboard» is checked.

LogBox​

Errors and warnings in development builds are displayed in LogBox inside your app.

LogBox is automatically disabled in release (production) builds.

Console Errors and Warnings​

Console errors and warnings are displayed as on-screen notifications with a red or yellow badge, and the number of errors or warning in the console respectively. To view a console error or warnings, tap the notification to view the full screen information about the log and to paginate through all of the logs in the console.

These notifications can be hidden using LogBox.ignoreAllLogs() . This is useful when giving product demos, for example. Additionally, notifications can be hidden on a per-log basis via LogBox.ignoreLogs() . This is useful when there’s a noisy warning that cannot be fixed, like those in a third-party dependency.

Ignore logs as a last resort and create a task to fix any logs that are ignored.

Unhandled Errors​

Unhandled JavaScript errors such as undefined is not a function will automatically open a full screen LogBox error with the source of the error. These errors are dismissable and minimizable so that you can see the state of your app when these errors occur, but should always be addressed.

Syntax Errors​

When syntax error occurs the full screen LogBox error will automatically open with the stack trace and location of the syntax error. This error is not dismissable because it represents invalid JavaScript execution that must be fixed before continuing with your app. To dismiss these errors, fix the syntax error and either save to automatically dismiss (with Fast Refresh enabled) or cmd+r to reload (with Fast Refresh disabled).

Chrome Developer Tools​

To debug the JavaScript code in Chrome, select «Debug JS Remotely» from the Developer Menu. This will open a new tab at http://localhost:8081/debugger-ui.

Select Tools → Developer Tools from the Chrome Menu to open the Developer Tools. You may also access the DevTools using keyboard shortcuts ( ⌘⌥I on macOS, Ctrl Shift I on Windows). You may also want to enable Pause On Caught Exceptions for a better debugging experience.

Note: on Android, if the times between the debugger and device have drifted; things such as animation, event behavior, etc., might not work properly or the results may not be accurate. Please correct this by running adb shell «date `date +%m%d%H%M%Y.%S%3N`» on your debugger machine. Root access is required for the use in real device.

Note: the React Developer Tools Chrome extension does not work with React Native, but you can use its standalone version instead. Read this section to learn how.

Debugging using a custom JavaScript debugger​

To use a custom JavaScript debugger in place of Chrome Developer Tools, set the REACT_DEBUGGER environment variable to a command that will start your custom debugger. You can then select «Debug JS Remotely» from the Developer Menu to start debugging.

The debugger will receive a list of all project roots, separated by a space. For example, if you set REACT_DEBUGGER=»node /path/to/launchDebugger.js —port 2345 —type ReactNative» , then the command node /path/to/launchDebugger.js —port 2345 —type ReactNative /path/to/reactNative/app will be used to start your debugger.

Custom debugger commands executed this way should be short-lived processes, and they shouldn’t produce more than 200 kilobytes of output.

Safari Developer Tools​

You can use Safari to debug the iOS version of your app without having to enable «Debug JS Remotely».

• Enable Develop menu in Safari: Preferences → Advanced → Select «Show Develop menu in menu bar»
• Select your app’s JSContext: Develop → Simulator → JSContext
• Safari’s Web Inspector should open which has a Console and a Debugger

While sourcemaps may not be enabled by default, you can follow this guide or video to enable them and set break points at the right places in the source code.

However, every time the app is reloaded (using live reload, or by manually reloading), a new JSContext is created. Choosing «Automatically Show Web Inspectors for JSContexts» saves you from having to select the latest JSContext manually.

React Developer Tools​

You can use the standalone version of React Developer Tools to debug the React component hierarchy. To use it, install the react-devtools package globally:

Note: Version 4 of react-devtools requires react-native version 0.62 or higher to work properly.

Источник

Running On Device

It’s always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.

If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app—but in order to build and run your app on a device, you will need to eject and install the native code dependencies from the environment setup guide.

Running your app on Android devices​

Development OS​

1. Enable Debugging over USB​

Most Android devices can only install and run apps downloaded from Google Play, by default. You will need to enable USB Debugging on your device in order to install your app during development.

To enable USB debugging on your device, you will first need to enable the «Developer options» menu by going to Settings → About phone → Software information and then tapping the Build number row at the bottom seven times. You can then go back to Settings → Developer options to enable «USB debugging».

2. Plug in your device via USB​

Let’s now set up an Android device to run our React Native projects. Go ahead and plug in your device via USB to your development machine.

Now check that your device is properly connecting to ADB, the Android Debug Bridge, by running adb devices .

Seeing device in the right column means the device is connected. You must have only one device connected at a time.

3. Run your app​

Type the following in your command prompt to install and launch your app on the device:

If you get a «bridge configuration isn’t available» error, see Using adb reverse.

Hint: You can also use the React Native CLI to generate and run a Release build (e.g. npx react-native run-android —variant=release ).

Connecting to the development server

You can also iterate quickly on a device by connecting to the development server running on your development machine. There are several ways of accomplishing this, depending on whether you have access to a USB cable or a Wi-Fi network.

Method 1: Using adb reverse (recommended)​

You can use this method if your device is running Android 5.0 (Lollipop) or newer, it has USB debugging enabled, and it is connected via USB to your development machine.

Run the following in a command prompt:

To find the device name, run the following adb command:

You can now enable Live reloading from the Developer menu. Your app will reload whenever your JavaScript code has changed.

Method 2: Connect via Wi-Fi​

You can also connect to the development server over Wi-Fi. You’ll first need to install the app on your device using a USB cable, but once that has been done you can debug wirelessly by following these instructions. You’ll need your development machine’s current IP address before proceeding.

You can find the IP address in System Preferences → Network.

1. Make sure your laptop and your phone are on the same Wi-Fi network.
2. Open your React Native app on your device.
3. You’ll see a red screen with an error. This is OK. The following steps will fix that.
4. Open the in-app Developer menu.
5. Go to Dev Settings → Debug server host & port for device.
6. Type in your machine’s IP address and the port of the local dev server (e.g. 10.0.1.1:8081).
7. Go back to the Developer menu and select Reload JS.

You can now enable Live reloading from the Developer menu. Your app will reload whenever your JavaScript code has changed.

Building your app for production​

You have built a great app using React Native, and you are now itching to release it in the Play Store. The process is the same as any other native Android app, with some additional considerations to take into account. Follow the guide for generating a signed APK to learn more.

1. Enable Debugging over USB​

Most Android devices can only install and run apps downloaded from Google Play, by default. You will need to enable USB Debugging on your device in order to install your app during development.

To enable USB debugging on your device, you will first need to enable the «Developer options» menu by going to Settings → About phone → Software information and then tapping the Build number row at the bottom seven times. You can then go back to Settings → Developer options to enable «USB debugging».

2. Plug in your device via USB​

Let’s now set up an Android device to run our React Native projects. Go ahead and plug in your device via USB to your development machine.

Now check that your device is properly connecting to ADB, the Android Debug Bridge, by running adb devices .

Seeing device in the right column means the device is connected. You must have only one device connected at a time.

3. Run your app​

Type the following in your command prompt to install and launch your app on the device:

Select your project in the Xcode Project Navigator, then select your main target (it should share the same name as your project). Look for the «Signing & Capabilities» tab. Go to «Signing» and make sure your Apple developer account or team is selected under the Team dropdown. Do the same for the tests target (it ends with Tests, and is below your main target).

Hint: You can also use the React Native CLI to generate and run a Release build (e.g. npx react-native run-android —variant=release ).

Connecting to the development server

You can also iterate quickly on a device by connecting to the development server running on your development machine. There are several ways of accomplishing this, depending on whether you have access to a USB cable or a Wi-Fi network.

Method 1: Using adb reverse (recommended)​

You can use this method if your device is running Android 5.0 (Lollipop) or newer, it has USB debugging enabled, and it is connected via USB to your development machine.

Run the following in a command prompt:

To find the device name, run the following adb command:

You can now enable Live reloading from the Developer menu. Your app will reload whenever your JavaScript code has changed.

Method 2: Connect via Wi-Fi​

You can also connect to the development server over Wi-Fi. You’ll first need to install the app on your device using a USB cable, but once that has been done you can debug wirelessly by following these instructions. You’ll need your development machine’s current IP address before proceeding.

Open the command prompt and type ipconfig to find your machine’s IP address (more info).

1. Make sure your laptop and your phone are on the same Wi-Fi network.
2. Open your React Native app on your device.
3. You’ll see a red screen with an error. This is OK. The following steps will fix that.
4. Open the in-app Developer menu.
5. Go to Dev Settings → Debug server host & port for device.
6. Type in your machine’s IP address and the port of the local dev server (e.g. 10.0.1.1:8081).
7. Go back to the Developer menu and select Reload JS.

You can now enable Live reloading from the Developer menu. Your app will reload whenever your JavaScript code has changed.

Building your app for production​

You have built a great app using React Native, and you are now itching to release it in the Play Store. The process is the same as any other native Android app, with some additional considerations to take into account. Follow the guide for generating a signed APK to learn more.

1. Enable Debugging over USB​

Most Android devices can only install and run apps downloaded from Google Play, by default. You will need to enable USB Debugging on your device in order to install your app during development.

To enable USB debugging on your device, you will first need to enable the «Developer options» menu by going to Settings → About phone → Software information and then tapping the Build number row at the bottom seven times. You can then go back to Settings → Developer options to enable «USB debugging».

2. Plug in your device via USB​

Let’s now set up an Android device to run our React Native projects. Go ahead and plug in your device via USB to your development machine.

Next, check the manufacturer code by using lsusb (on mac, you must first install lsusb). lsusb should output something like this:

These lines represent the USB devices currently connected to your machine.

You want the line that represents your phone. If you’re in doubt, try unplugging your phone and running the command again:

You’ll see that after removing the phone, the line which has the phone model («Motorola PCS» in this case) disappeared from the list. This is the line that we care about.

Bus 001 Device 003: ID 22b8:2e76 Motorola PCS

From the above line, you want to grab the first four digits from the device ID:

In this case, it’s 22b8 . That’s the identifier for Motorola.

You’ll need to input this into your udev rules in order to get up and running:

Make sure that you replace 22b8 with the identifier you get in the above command.

Now check that your device is properly connecting to ADB, the Android Debug Bridge, by running adb devices .

Seeing device in the right column means the device is connected. You must have only one device connected at a time.

3. Run your app​

Type the following in your command prompt to install and launch your app on the device:

If you get a «bridge configuration isn’t available» error, see Using adb reverse.

Hint: You can also use the React Native CLI to generate and run a Release build (e.g. npx react-native run-android —variant=release ).

Connecting to the development server

You can also iterate quickly on a device by connecting to the development server running on your development machine. There are several ways of accomplishing this, depending on whether you have access to a USB cable or a Wi-Fi network.

Method 1: Using adb reverse (recommended)​

You can use this method if your device is running Android 5.0 (Lollipop) or newer, it has USB debugging enabled, and it is connected via USB to your development machine.

Run the following in a command prompt:

To find the device name, run the following adb command:

You can now enable Live reloading from the Developer menu. Your app will reload whenever your JavaScript code has changed.

Method 2: Connect via Wi-Fi​

You can also connect to the development server over Wi-Fi. You’ll first need to install the app on your device using a USB cable, but once that has been done you can debug wirelessly by following these instructions. You’ll need your development machine’s current IP address before proceeding.

Open a terminal and type /sbin/ifconfig to find your machine’s IP address.

1. Make sure your laptop and your phone are on the same Wi-Fi network.
2. Open your React Native app on your device.
3. You’ll see a red screen with an error. This is OK. The following steps will fix that.
4. Open the in-app Developer menu.
5. Go to Dev Settings → Debug server host & port for device.
6. Type in your machine’s IP address and the port of the local dev server (e.g. 10.0.1.1:8081).
7. Go back to the Developer menu and select Reload JS.

You can now enable Live reloading from the Developer menu. Your app will reload whenever your JavaScript code has changed.

Building your app for production​

You have built a great app using React Native, and you are now itching to release it in the Play Store. The process is the same as any other native Android app, with some additional considerations to take into account. Follow the guide for generating a signed APK to learn more.

Running your app on iOS devices​

Development OS​

1. Plug in your device via USB​

Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace , within it using Xcode.

If this is your first time running an app on your iOS device, you may need to register your device for development. Open the Product menu from Xcode’s menubar, then go to Destination. Look for and select your device from the list. Xcode will then register your device for development.

2. Configure code signing​

Register for an Apple developer account if you don’t have one yet.

Select your project in the Xcode Project Navigator, then select your main target (it should share the same name as your project). Look for the «General» tab. Go to «Signing» and make sure your Apple developer account or team is selected under the Team dropdown. Do the same for the tests target (it ends with Tests, and is below your main target).

Repeat this step for the Tests target in your project.

3. Build and Run your app​

If everything is set up correctly, your device will be listed as the build target in the Xcode toolbar, and it will also appear in the Devices pane ( ⇧⌘2 ). You can now press the Build and run button ( ⌘R ) or select Run from the Product menu. Your app will launch on your device shortly.

If you run into any issues, please take a look at Apple’s Launching Your App on a Device docs.

Connecting to the development server

You can also iterate quickly on a device using the development server. You only have to be on the same Wi-Fi network as your computer. Shake your device to open the Developer menu, then enable Live Reload. Your app will reload whenever your JavaScript code has changed.

Troubleshooting​

If you have any issues, ensure that your Mac and device are on the same network and can reach each other. Many open wireless networks with captive portals are configured to prevent devices from reaching other devices on the network. You may use your device’s Personal Hotspot feature in this case. You may also share your internet (WiFi/Ethernet) connection from your Mac to your device via USB and connect to the bundler through this tunnel for very high transfer speeds.

When trying to connect to the development server you might get a red screen with an error saying:

Connection to http://localhost:8081/debugger-proxy?role=client timed out. Are you running node proxy? If you are running on the device, check if you have the right IP address in RCTWebSocketExecutor.m .

To solve this issue check the following points.

1. Wi-Fi network.​

Make sure your laptop and your phone are on the same Wi-Fi network.

2. IP address​

Make sure that the build script detected the IP address of your machine correctly (e.g. 10.0.1.123).

Open the Report navigator tab, select the last Build and search for IP= followed by an IP address. The IP address which gets embedded in the app should match your machines IP address.

Building your app for production​

You have built a great app using React Native, and you are now itching to release it in the App Store. The process is the same as any other native iOS app, with some additional considerations to take into account. Follow the guide for publishing to the Apple App Store to learn more.

A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to our environment setup guide to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.

A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to our environment setup guide to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.

Источник