debugging

134 notes in this subject, read out of this brain and free to use. This is page 3 of 3.

Setting breakpoints in React Native DevTools

Set breakpoints under the Sources tab by clicking the line number or by adding the 'debugger' statement in your code. When a breakpoint is reached, the app pauses entirely, allowing inspection of all variables and functions in that scope. Code can be executed in the Console tab.

Pause on exceptions in React Native DevTools

React Native DevTools can pause the app when it throws unexpected errors, allowing inspection of the stack trace and variables. Turn on 'Pause on caught exceptions' to inspect any thrown error, even when handled properly by components such as Expo Router.

Console tab in React Native DevTools

The Console tab provides an interactive terminal connected directly to the app. JavaScript can be written and executed in this terminal, executing in the global scope by default. When using breakpoints from the Sources tab, code executes in the scope of the reached breakpoint, allowing invocation of methods and access to variables throughout the app.

Network tab in React Native DevTools (Expo only)

The Network tab is only available with expo-dev-client installed or when using Expo Go. It provides insights into network requests made by the app, including fetch requests, external loaded media, and sometimes requests made by native modules. Each request and response can be inspected by clicking on them.

Memory tab in React Native DevTools

The Memory tab allows inspection of memory usage and taking heap snapshots of the app's JavaScript code.

Components tab in React Native DevTools

The Components tab allows inspection of React components in the app. Props and styles of each component can be viewed by hovering over the component in React Native DevTools, useful for debugging UI and understanding component structure.

Profiler tab limitations in React Native DevTools

Profiles in the Profiler tab are not yet symbolicated with sourcemaps and can only be used in debug builds. These limitations will be addressed in upcoming releases. To profile the native runtime, use tools included in Android Studio or Xcode.

Rozenite plugin framework for React Native DevTools

Rozenite is a React Native DevTools plugin framework allowing installation of plug-and-play integrations that get auto-discovered and appear as panels in React Native DevTools. Custom Rozenite plugins can be created to integrate with custom or third-party tools.

VS Code debugger for Expo (alpha status)

VS Code debugger integration is in alpha status. To use it, install the Expo Tools VS Code extension. The debugger uses the same inspector protocol system as React Native DevTools and allows setting breakpoints, inspecting variables, and executing code through the debug console. Open the VS Code command palette (Ctrl + Shift + P or Cmd ⌘ + Shift + P) and run 'Expo: Debug ...' command to attach VS Code to a running app.

Radon IDE extension for VS Code

Radon IDE is a paid VS Code extension (30-day free trial) that turns the editor into a powerful environment for React Native and Expo projects. It includes advanced debugging, network inspector, router integration, and other built-in tools.

React Native Debugger setup

Install React Native Debugger via the release page or on macOS via 'brew install react-native-debugger'. Specify the port to 8081 using shortcuts: Cmd ⌘ + T on macOS, Ctrl + T on Linux/Windows. Run the project with 'npx expo start' and select 'Debug remote JS' from the Developer Menu. The debugger automatically connects and displays the Element tree, props, state, and children of selected elements, with Chrome console and $r command for element breakdown.

Network inspection in React Native Debugger

Right-click in React Native Debugger and select 'Enable Network Inspect' to enable the Network tab and inspect fetch and XMLHttpRequest requests. However, there are limitations, so alternatives using proxies include Charles Proxy (~$50 USD, preferred tool), Proxyman (free version or $49-$59 USD), mitmproxy, and Fiddler.

Expo Tools VS Code extension

Expo Tools is a VS Code extension that improves development experience when working with app config files. It provides autocomplete and intellisense for app config, EAS config, store config, and Expo Module config files. It can also be used to debug your app using VS Code's built-in debugger to set breakpoints, inspect variables, and execute code through the debug console.

Expo Doctor tool

Expo Doctor is a command-line tool used to diagnose issues in your Expo project. Run `npx expo-doctor` (npm), `yarn dlx expo-doctor` (yarn), `pnpm dlx expo-doctor` (pnpm), or `bunx expo-doctor` (bun) in your project's root directory. It checks app config and package.json files, dependency compatibility, configuration files, and overall project health. By default it validates packages against React Native directory and checks if app config properties are properly synced when native directories exist. These checks can be configured in package.json using `reactNativeDirectoryCheck` and `appConfigFieldsNotSyncedCheck` properties.

Give your agent this brain