Debugging investigates what an application does while it runs. Unlike linting and formatting, which examine source code without running it, debugging lets you inspect changing values and execution in the live browser environment. Bugs can remain even when static checks are in place; finding their cause is a separate skill. section 4.4.1 section 4.4
For a React problem, choose the view that matches the question:
- Use the React Developer Tools components inspector to examine the component tree and the properties passed to a component. section 4.4.1
- Use its rendering highlighter to see which components render, then investigate why. Use the profiler when components render too frequently or too slowly. section 4.4.1
- Use browser developer tools when you need general-purpose debugging, such as watching variable values, pausing execution, or checking when code runs. React Developer Tools does not replace that broader debugger. section 4.4.1 section 4.4
Trace a visible styling defect
If an element has the wrong color, work backward from the browser result to the source line responsible for it. How quickly you can make that connection is a practical debugging consideration when choosing a styling approach. section 7.1.2
Match additional tools to the stack rather than treating one debugger as universal: Redux DevTools applies to Redux-based applications, React Native Debugger bridges React Native applications, and Reactotron serves Electron-wrapped applications. Replay.io is an option for recreating error sessions, with access to other users’ sessions tied to paid tiers. section 4.4.5
