Debugging a React application might be very confusing.
Let me introduce you three ways that might help you:
1. Use the
You just need to put the
// posible buggy line of code const b = ... debugger
Do not forget to remove those debugger statements once you’re done.
2. Add breakpoints from Chrome’s DevTool.
Getting those kind of errors are not very helpful, right? Even if you manage to open your bundle.js file without your Text editor to hang for some minutes, most probably is you won’t be able to know where is that line coming from.
To add a breakpoint from Chrome’s DevTools, open the Source tab, hit
p keys (
CTRL if you on Windows) to search for your file, and then click the line number you want the breakpoint to be added.
![Searching source maps from DevTools.jsx](2-browser-sourcemaps.png)
There are some bugs adding breakpoints to source maps, like breakpoint been added in another line different to the clicked one, but it’ll work most of the times.
3. Use React DevTools
There is a very useful Chrome’s extension that allows you to search through your rendered React Components as a DOM tree, you can inspect them, see their props, ref, and state.
![Searching React components in the DOM tree.jsx](3-react-devtools-components.png)
You can go to the React DevTools official GitHub repository to get more information and installation instructions.
Well, and if nothing works, just console.log all the things.
Is there any other handy way you use to debug React apps?