Debugging
We’ve done stylin’, now time for profilin’. Woo!
1. Browser Console
Debug react apps using the browser console.
This gives the stack trace that raised the error, and the file and line number on which it was raised.
2. Debugger
Use the Sources tab (in chrome) to use the debugger.
You’ll see the directory structure of your project. You can click a line number to set a breakpoint and pause execution there, then observe variable values or step through execution.
You can also achieve the same by placing a debugger() line in the code.
3. Strict Mode
StrictMode is a React component which you can wrap any other component in, including the root App component.
import { StrictMode } from 'react';It causes React to render every component twice in development mode. This can help surface errors that may not be obvious in normal execution.
4. React Developer Tools
This is a browser extension. It adds 2 new tabs to the console view in the browser window: profiler and components.
Components shows your component tree and highlights these in the browser. It also gives information about that component such as props. You can edit those props values in the browser. You can also see hooks and their state values.
References
- Section 7 of “React: The Complete Guide” Udemy course