Debugging

A mobile app does not have the familiar browser console at hand, but the debugging tools are the same: console output, breakpoints, a component tree. They are available from the terminal running npx expo start.

console.log

console.log output on the phone goes to the terminal on your computer:

// app/(tabs)/index.tsx
async function load() {
  const response = await fetch(`${API}/posts`);
  const data = await response.json();
  console.log('Posts loaded:', data.length);
  setPosts(data);
}

After the list loads, the terminal shows "Posts loaded: 100". console.warn and console.error are printed there too and are also shown as a banner at the bottom of the app screen.

The red screen and warnings

The red screen shows the error text and the call stack with file names and line numbers. Fix the code and save the file, and Fast Refresh removes the screen. You can tap a warning banner to read the details. An app built for the store has none of these screens: there, an error simply closes the app.

The developer menu

The menu opens with the m key in the terminal or with a gesture on the device:

The menu has reload, a Fast Refresh toggle, the element inspector (tap an element on the screen to see its styles and size) and a performance monitor.

React Native DevTools

Press j in the terminal, and React Native DevTools opens in Chrome or Edge. It is a debugger similar to the browser developer tools:

• the Console tab: console.log output and evaluating expressions;
• the Sources tab: source code and breakpoints;
• the Components and Profiler tabs: the React component tree with props and state, and render timing.

Set a breakpoint on the setPosts(data) line and pull the list down: execution stops, and you can inspect the contents of data. A debugger; line in the code has the same effect.

Common mistake

Looking for console.log output in a browser while the app runs on a phone. It appears in the terminal running npx expo start and in the React Native DevTools console. If the terminal is closed or the server was restarted in another window, the messages are lost, so keep the server window in view.