React debugging. | Sololearn: Learn to code for FREE!

+5

React debugging.

What is the best way to debug react applications. I read that is good practice to use console.log(‘values are’, props) instead of console.log(‘values are’ + props) What method do you use and agree with advice that is written above?

4/20/2021 9:25:04 AM

puzzelena

6 Answers

New Answer

+5

If you use console.log for debugging, I would strongly urge you to study JavaScript debugger statement. All you need is to add debugger; to any line that need to check, you then can use browser devtool to analyze breakpoint of that line, set variable watch and step though the codes. https://docs.microsoft.com/en-us/dotnet/standard/base-types/regular-expression-language-quick-reference https://javascript.info/debugging-chrome For react development, developer should use debugger statement together with React developer tool extension for debugging.

+3

Also, I know it's just an example you used but if you log out the actual React props object like that, you might just see [object Object]. If that happens, using console.dir instead of console.log may help. Another way is to use JSON.stringify(), like this for example: console.log('values are', JSON.stringify(props, null, 2))

+3

CamelBeatsSnake thanks a lot for your informative answer 👍

+2

puzzelena console logging can be very useful for React debugging, but not just React. It's good for JavaScript debugging in general. You can also use other methods on the Console object like console.error, console.dir, console.warn to name a few. I have a slight preference for the first one you have, console.log('values are', someValue), because the output will be a little easier to read as it won't concatenate , unlike your other example. In terms of debugging React, I would strongly recommend you learn to use the React Dev Tools (https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) in the browser, as well as the general browser Dev Tools.

+2

puzzelena You're welcome 🙂 hope you enjoy learning React. I love it. It can be hard at at times but keep practicing.

+2

Calviղ thank you!