Debugging a React app is far from being an easy task... if you don't know the tools you already have, for free!
Today we'll see one of the many, that is the Visual Studio Code debugger.
I recorded a short demo here:
Unfortunately there's a little setup required, which is... literally 3 clicks!
- Go on the "Run and Debug" tab of vscode
- Click on the text "create a launch.json file"
- Select "Web App (Chrome)" from the dropdown
And that's it!
This will create a file called
launch.json inside the
.vscode folder of your project, similar to this:
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"name": "Launch Chrome against localhost",
With that set, technically you're ready to go by pressing
What could go wrong here? Mainly two things:
Make sure to set the correct port in the
url field of your
launch.json file. The default seems to be 8080, but it's not always the case.
If for example you're using vite, it should be 5173 or if you're using crate-react-app then it's likely to be 3000.
In general, make sure to set there the right port you're running your app on.
That's even easier, just run your app with the command you usually use, for example
npm run dev or
npm run start.
At this point you have your app running and the debugger attached to it, but nothing happened so far. It's time to set a breakpoint and see the magic happen!
Just click on the left side of a line in the code and the red dot will appear, that's a breakpoint.
If the application flow now passes into that line, the execution will stop there and you'll be able to inspect the state of the application at that point.
The first panel in the Run and Debug tab is the Variables panel, which shows all the variables available at that point.
Variables are grouped by scope, you can easily inspect them, expand objects and arrays to see the content and... you can even change their value!
However, if for example you change something which should be visible in the UI, you won't see it changing. Most likely the reason will be that since you're currently paused on a line, the component is not re-rendered. Just keep going with the debugger and you'll see the UI updating.
The Watch panel is similar to the Variables one, but it allows you to add custom expressions to watch.
For example, if in your application you have an array of squares and you want to see how many items are in there, you can add an expression like
squares.length and it will be evaluated and shown in the Watch panel.
Similarly, if you want to keep track of the squares having a specific value, for example not null, you can add an expression like
squares.filter(s => s !== null).length and again you'll see the value updated as you go through the application, real time!
The Call Stack panel shows the current stack of function calls, which is useful to understand how you got to the current point.
Let's say you're in a function, who called that function? And who called the caller? You can find the entire stack here.
The last panel is the Breakpoints one, which shows all the breakpoints you set in the code. You can activate/deactivate breakpoint there, or also disable them without losing them.
By hovering on a breakpoint you can see a little pencil icon, which allows you to make that breakpoint a conditional one.
The most common usecase is if you're setting a debugger inside a loop, but you want to stop only when a specific condition is met and not at each iteration. There you have it, set the condition and you're good to go!
Anyway, in case you’re using Chrome, you actually have two debuggers ready to use. The one on vscode works great, but in case you’d like to have everything integrated in your browser, I also wrote an article on the Chrome debugger. You can read it here:
Thanks for reading, happy debugging!
Thanks for reading this article, I hope you found it interesting!
I recently launched my Discord server to talk about Open Source and Web Development, feel free to join: https://discord.gg/bqwyEa6We6
Feel free to follow me to get notified when new articles are out ;)