Debugging react apps

STEPS

1. Understanding errors
2. Debugging & Analyzing react apps
3. Using the react dev Tools

Understanding errors

When you make errors, react console point the line of error and give you message.

For example,

<div
        className={`${styles["form-control"]} ${!isValid && styles.invalid}`}
      
        <label>Course Goal</label>
        <input type="text" onChange={goalInputChangeHandler} />
      </div>

I deleted closing tags intentionally.
This will cause an error because it doesn't match correspond tag.
The error message is :

./src/components/CourseGoals/CourseInput/CourseInput.js
SyntaxError: E:\frontend Portfolio\01-starting-project\src\components\CourseGoals\CourseInput\CourseInput.js: Unexpected token (62:8)

Console says that there is unexpected token. It is clear error, so we can notice there is inappropriate tag match.

Analyzing Code Flow & warnings

Maybe there is an error which doens't occur bug in compile process, but in interaction process with user after compiling. In that case, there may be warning message in browser console.
It is logical error.
If the things don't go as you thought, you need to check every steps that make the logic and find which step cause the error.

Working with browser debugger

Sometimes, you may not understand what the exact error is and where the logic has flaw.
In this case, we can use browser breakpoint.
Take this steps.
1. open browser developer tools
2. Go to sources tab
3. Go to a file related to error.
4. There will be a code of that file on the right side
5. Clicking error prone line and execute that break point
6. With next step button, you can see what's going on the process of logic.

React dev Tools

Add chrome browser extension 'React dev Tools'
If you install that extension, you can see addtional tab in chrome developer tools(profile, components).

Component tab will only show you about React component without other html structure.

If you each components, you will see which props it have and which component render it.
You can investigate more-detailed process of react apps here.

For more information, refer to the extension docs.

Ref : React - The complete guide