How To Debug React Apps With VS Code - Boost Your Debugging Productivity

For a detailed text-based step-by-step tutorial with screenshots visit https://profy.dev/article/debug-react...
To get the source code and a fully set up repository that's used in this tutorial visit https://bit.ly/3BNOwZL

00:00 - First Marker
00:22 - Create launch config
01:19 - Run Chrome via VS Code
01:37 - Example bug to be fixed
02:02 - Open the source code in VS Code via the error message
02:08 - Set a breakpoint
02:12 - The debugger in action
02:34 - Set a conditional breakpoint
02:57 - Why the callstack or "Step out" doesn't work with React
03:18 - Find the parent component with VS Code's global search
03:33 - Inspect variables in the debugger
03:44 - Edit variables in the debugger
04:27 - Use "Step Into" to narrow down
04:43 - Sometimes breakpoints don't work
04:54 - Fix the bug

• #education
• #react
• #vscode