Debugging React Apps in Firefox: DevTools, React DevTools Extension, and Profiler Workflow

React developers have access to some of the best debugging tools in the ecosystem. Here's how Firefox DevTools plus the React DevTools extension combine for an effective debugging workflow.

React DevTools in Firefox

Install: Search "React Developer Tools" on addons.mozilla.org (published by Meta).

After installing, two new panels appear in DevTools when you're on a React page:

• Components: The React component tree with props and state
• Profiler: Performance recording for React rendering

Components Panel Deep Dive

The Components panel shows:

• Component tree hierarchy (like React's virtual DOM)
• Props for each component (hover or click to see values)
• State and context
• Hooks (useState, useEffect, useContext, etc.)

Selecting components:
Click any component to see its props and state. The "select element" button (crosshair icon) lets you click on the rendered UI and highlights the corresponding component.

Editing state in DevTools:
Click a component → see its hooks list. Click the edit icon next to a useState hook to change its value in-place. The UI immediately re-renders with the new value.

This is extremely useful for:

• Testing edge cases without writing test data
• Verifying how a component responds to different props
• Checking what state was set after a user action

Searching components:
The search box in the Components panel filters the component tree. Search by component name (e.g., "Button" shows all Button components).

Profiler Panel

Record a profiling session:

1. Profiler panel → click record (circle button)
2. Interact with your app (click buttons, navigate, etc.)
3. Click stop
4. Analyze the flamegraph

Flamegraph view:
Shows which components rendered during the recording. Each bar represents a component render:

• Width = time to render
• Color = time relative to other renders (grey = fast, yellow/red = slow)

What to look for:

• Components that re-render far more often than expected
• Parent components triggering child re-renders unnecessarily
• useEffect or useCallback dependencies causing cascading re-renders

Commit view (bar chart at top):
Each bar is one React "commit" (batch of state updates). Tall bars = expensive commits. Click any bar to see what rendered in that commit.

Firefox DevTools + React: The Combination

React DevTools shows the component tree. Firefox DevTools shows the DOM, network, and performance. They complement each other.

Workflow: debugging a slow render:

1. Firefox DevTools Performance → record
2. Trigger the slow action
3. Stop recording
4. Check the flame chart for long frames
5. Switch to React DevTools Profiler
6. Record the same action
7. Find which components took the most time to render

Workflow: debugging an API call:

1. Firefox Network panel → filter to XHR/Fetch
2. Trigger the action that makes the call
3. See the request details (payload, response)
4. Switch to React DevTools → find the component that handles the data
5. Check its state before and after the call

Firefox-Specific Network Panel Features

For React apps, the Network panel's "Edit and Resend" is useful:

Right-click an API request → Edit and Resend

• Modify headers, body, or URL
• Resend to test different responses
• See how the React app handles error states or different data shapes

This avoids having to mock the backend to test edge cases — just resend with modified data directly.

Console Integration

$r in React DevTools: When you select a component in React DevTools, $r in the browser console references that component instance.

// In Firefox console, after selecting a component in React DevTools:
$r.props  // See all props
$r.state  // See state (class components)

$0 for DOM elements: When you select an element in the regular Inspector panel, $0 references it in the console. Switch to React DevTools after selecting a DOM node to see the corresponding React component.

Debugging Hooks

React DevTools shows all hooks for a selected component. For custom hooks, it shows the hook name and current value.

Common hook debugging patterns:

• useEffect not running: Check the component in React DevTools. Are the dependencies showing the expected values?
• useState not updating: Click the component before and after the action. Did the state value change?
• useContext value unexpected: Check the context provider higher in the tree. Click up the component tree to find the Provider and see what value it's providing.

Browser Console for React

React warns about key issues in console:
Watch the console when developing — React logs useful warnings:

• "Each child in a list should have a unique 'key' prop"
• "Can't perform a React state update on an unmounted component"
• "Warning: An update to X inside a test was not wrapped in act()"

These warnings appear in Firefox console same as Chrome.

Filtering console messages: The Firefox console filter can filter by "Warnings" to see only React warnings, or by source file.

Strict Mode Behavior

React's StrictMode intentionally renders components twice in development to detect side effects. This appears in DevTools as double renders.

If you're seeing unexpected double renders in the Profiler, check if the component is wrapped in <React.StrictMode> — this is expected behavior, not a bug.

Strict Mode only affects development builds (React strips it from production).

Debugging Context

When using React Context, finding where a context value comes from can be tricky.

In React DevTools Components panel:

1. Find the consumer component (the one reading from context)
2. Look at its hooks — useContext hook shows the current value
3. Click the "jump to definition" button (if available) or navigate up the tree to find the Provider

Tip: name your contexts clearly. MyContext vs unnamed context is much easier to identify in DevTools.

Performance: React.memo and useMemo

React DevTools Profiler shows why components re-rendered. Look for:

• "Props changed" — expected re-render
• "State changed" — component's own state changed
• "Context changed" — subscribed context changed
• "Parent render" — parent re-rendered (can be prevented with React.memo)

If you see "Parent render" for a component that should be memoized:

1. Check if React.memo is wrapping it
2. Check if the props being passed are stable (objects/functions create new references every render)
3. For objects: use useMemo; for functions: use useCallback

Firefox vs Chrome for React Development

The React DevTools extension is the same in both. Functional differences:

Firefox advantages:

• Network panel "Edit and Resend" is native (Chrome needs an extension for this)
• Storage inspector (Local Storage, Session Storage, IndexedDB) in Firefox's Storage panel
• Screenshot capabilities built into screenshot tool

Chrome advantages:

• React DevTools performs slightly faster in some cases (Chromium's V8 is very fast)
• Some React Native debugging tools prefer Chrome

For most React development, Firefox works as well as Chrome. The React DevTools extension provides identical functionality in both.