You can pause your React app at any moment and analyze all current props, variables, and the state of any component in detail directly in your browser.
Here is how to do it 👇
Set a breakpoint
- Open DevTools and go to the Sources tab.
Command + P(Mac)
Ctrl + P(Windows / Linux) to open the file with the component you want to debug.
- Pick the place in your code which you are interested in, and click on the line number to set a breakpoint.
Analyze the app
DevTools will pause the code execution when it reaches your breakpoint. During this time you can hover on props and variables in your app to see their current value.
Resume execution or step over
- You can click on the bent arrow to step over to the next function.
- After you’ve done debugging, click on “Resume script execution”.
- To remove breakpoint click on the line number once again.
To learn more about breakpoints, check out 👇