12 tips to help you debug your react application
1. Check chrome dev tools →console tab for errors and warning
Your console must be clean from warnings and errors.
A warning can easily turn into an error
2. Open react dev tools using chrome dev tools →components. check props, state, and context values
Compare the state\props\context that you expect with what you have in the Component tab
3. Put code breakpoint using chrome dev tools →sources
Put a breakpoint and debug your code
4. Perform self-code review. In particular, try to isolate specific lines of code
Simply go over the code line by line and look for logical mistakes. Tty to make an intelligent guess which lines of code to look in
5. Add console.log when loops are involved
You might have a code that performs a loop. Putting a breakpoint, in this case, might not be suited because the bug might rise on loop 100,000. console.log is more appropriate in this case
6. Check chrome dev tools →network when you suspect the bug relates to HTTP
Status 2X is your friend , look for it
7. Check chrome dev tools →elements when you suspect the bug relates to the DOM
Compare the dom properties you expect with the one that actually appears in the elements tab
8. Comment out suspicious lines of code
A nasty bug may be hard to isolate. One common technique is to start commenting out lines of code. You can start to comment each time 50% of the code, and once the bug disappears you know which part of the code to focus on.
9. Restart the application
Some tools: vs code, creat-react-app, … sometimes just need a restart and everything starts to function well
10. On development, check if the application works on the default port 3000 or maybe another port is used e.g. 3001 (can happen on vite)
vite allows you to run on multiple terminals each on a different port starting from 3000. So keep an eye on this
11. Ask a friend to perform a code review
Sometimes the problem is clear but you just don't see it, another pair of eyes might very well help
12. There is no point in following these steps if you are tired.
You have a bug but it's late, you want to fix the bug but your brain is simply too tired to think. If you continue you will most likely add more bugs, so just stop, go to sleep and start over in the morning
