skip to content

Developer Menu & LogBox

1 roadmap4 questions

The Dev Menu opens by shortcut or shake and toggles reloads and DevTools; LogBox shows warnings as toasts and errors as a full-screen redbox. Interviewers probe what silencing logs hides.

part ofReact Nativeoverview, primer and where to startread it →
on this pageshow

explore

questions

4

In React Native, how do you open the Dev Menu on the iOS Simulator, an Android emulator and a device, and what does it offer?

level: juniorimportance: must knowfreq 50%

answer

  1. development builds only
  2. Ctrl+Cmd+Z on the iOS Simulator
  3. Cmd/Ctrl+M on an Android emulator
  4. shake, or adb keyevent 82
  5. d in the Metro terminal

basics

~20 s

Open the React Native Dev Menu with Ctrl+Cmd+Z on the iOS Simulator, Cmd+M or Ctrl+M on an Android emulator, a shake on a device, adb shell input keyevent 82, or d in Metro. It offers reload, DevTools, Fast Refresh and inspector toggles in development builds only.

solid answer

~30 s

The Dev Menu is React Native's in-app developer menu and exists only in development builds. On the iOS Simulator it is `Ctrl+Cmd+Z` or Device > Shake; on an Android emulator `Cmd+M` on macOS or `Ctrl+M` elsewhere; on a physical device you shake it. On Android you can also send the menu key with `adb shell input keyevent 82`, and pressing `d` in the Metro terminal opens it on connected apps. It gives you Reload, Open DevTools, the Fast Refresh toggle, the Element Inspector and the Perf Monitor, and apps can add their own development entries with `DevSettings.addMenuItem`.

code

bash · 2 lines
bash
# Android device or emulator: send the menu key (code 82)
adb shell input keyevent 82

go deeper

for a junior

Recall the shortcut per platform, the shake gesture, adb keyevent 82 and Metro's d key, and that the menu exists only in development builds.

for a middle

Explain what each entry does, especially Reload versus Fast Refresh, and that Open DevTools replaced older remote debugging tools.

for a senior

Show you can make the dev loop efficient for a team: custom DevSettings items for test setup, and knowing why the menu is missing in a given build.

for a principal

Treat development-only tooling as part of the team's workflow design, including how QA builds expose or hide it.

## What the Dev Menu is The **Dev Menu** is React Native's in-app developer menu: a native sheet, titled "React Native Dev Menu" on Android, that gives quick access to the development tools of the running app. It exists only in **development builds**. The React Native docs state that the Dev Menu, LogBox and React Native DevTools are disabled in release builds; on Android, the key handler that opens the menu explicitly does nothing when the app runs with the release dev-support manager. ## How to open it | Where the app runs | How to open the Dev Menu | |---|---| | iOS Simulator | <kbd>Ctrl</kbd> + <kbd>Cmd</kbd> + <kbd>Z</kbd>, or Device > Shake | | Android emulator | <kbd>Cmd</kbd> + <kbd>M</kbd> on macOS, <kbd>Ctrl</kbd> + <kbd>M</kbd> on Windows and Linux | | Physical device | shake the device | | Android device or emulator from a terminal | `adb shell input keyevent 82` | | Any app connected to Metro | press <kbd>d</kbd> in the terminal running Metro | **Key event 82** is Android's menu key code. React Native's Android host treats a menu-key press as "show the Dev Menu", which is why sending that key event over adb works on a device where shaking is awkward — a phone on a stand, or a device farm. Two neighbouring shortcuts are worth knowing: - In Metro's terminal, <kbd>r</kbd> reloads the connected app and <kbd>j</kbd> opens React Native DevTools. - On Android, pressing <kbd>R</kbd> twice reloads the JavaScript. ## What is in it The entries vary a little by platform and version; on Android in React Native 0.87 they include: 1. **Reload** — re-runs the JavaScript bundle from the entry file; all in-memory state is lost. 2. **Open DevTools** — opens React Native DevTools, the debugger that replaced remote JS debugging and Flipper. 3. **Enable / Disable Fast Refresh** — toggles hot updates on save. 4. **Toggle Element Inspector** — tap an element on screen to see its component and styles. 5. **Show Perf Monitor** — an on-screen overlay of frame rates. 6. **Change Bundle Location** — point the app at a different Metro host and port. 7. **Settings** — lower-level debug settings. Apps can add their own entries in development with `DevSettings.addMenuItem(title, handler)`, for example "Reset loyalty points" or "Log out test user". React Native de-duplicates items by title, so re-running the registering module does not add copies. ## Practical scenarios - **A tester in a noisy legacy app** cannot find the menu: on a physical Android device plugged in over USB, `adb shell input keyevent 82` opens it without shaking. - **The menu will not open at all**: check that the build is a development build; a release build has no Dev Menu by design. - **"Open DevTools" fails**: the app must be connected to a running Metro dev server; the Android menu's error text says so ("check that the dev server is running"). ## Why interviewers ask It is a quick filter for hands-on experience. Candidates who have shipped React Native apps know the shortcuts per platform, know the menu is development-only, and know which entries replaced older tools — that Flipper and in-app remote debugging are gone and **Open DevTools** is the current path.

  • Why does the React Native Dev Menu not open in a release build?
    Developer tooling is compiled for development only: the docs state the Dev Menu, LogBox and React Native DevTools are disabled in release builds, and on Android the menu-key handler returns early when the release dev-support manager is in use. You debug a release build with native tools and symbolicated crash reports instead.
  • How do you add a custom entry to the React Native Dev Menu?
    Call `DevSettings.addMenuItem(title, handler)` from JavaScript in a development build. React Native uses the title as the item's identity, so registering the same title again replaces the handler instead of adding a duplicate entry.

saying these in an interview costs you the question

  • The Dev Menu is available in release builds for QA
  • Cmd+D is the only way to open the Dev Menu everywhere
  • Android key event 82 reloads the app instead of opening the menu
  • The Dev Menu still offers Debug JS Remotely as the debugger
  • Flipper is opened from the Dev Menu in current React Native
open as a page

In a legacy React Native app flooded with warnings, what do LogBox.ignoreLogs and LogBox.ignoreAllLogs each hide, and what do they leave visible?

level: middleimportance: should knowfreq 38%

basics

~20 s

LogBox.ignoreLogs drops LogBox entries matching a substring or RegExp, at any level, errors included. LogBox.ignoreAllLogs turns off LogBox notifications, but uncaught errors still open full screen. Neither removes messages from the console, and both do nothing in release builds.

open as a page

In React Native 0.87, how does LogBox treat console warnings, console errors and fatal errors differently during development?

level: middleimportance: should knowfreq 40%

basics

~20 s

LogBox, in development builds only, shows console errors as red notifications you can expand, and fatal or syntax errors as a full-screen view. Warnings are no longer listed in-app: a single banner tells you to open React Native DevTools, where the console holds them.

open as a page

After upgrading a React Native app to 0.82 or later, why do red LogBox errors reading "Uncaught (in promise, id: …)" appear, and how do you handle them?

level: seniorimportance: should knowfreq 30%

basics

~20 s

Since React Native 0.82, unhandled promise rejections are reported as non-fatal errors instead of being silently swallowed, so existing bugs surface as red LogBox errors. Fix each call site with await plus try/catch or .catch(), rather than ignoring the message.

open as a page