1 Feb 2022

Pause Your React App with Breakpoints

You can pause your React app at any moment to analyze all current props, variables, and the state of any component in detail directly in your browser.

Here's how to do it 👇

Set a breakpoint

Open DevTools and go to the Sources tab.
Press Command + P (Mac) or Ctrl + P (Windows / Linux) to open the file containing the component you want to debug.
Choose the place in your code that you're 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 over props and variables in your app to see their current values.

Resume execution or step over

Click on the bent arrow to step over to the next function.
After you've finished debugging, click on "Resume script execution".
To remove a breakpoint, click on the line number again.

To learn more about breakpoints, check out 👇
Debug JavaScript (Chrome DevTools Documentation)