How to Debug

[sujinleeme]

I hope this book handles not only console.log() but also useful and important parts of the Devtools more.

• Debugging React with Chrome
• React Developer Tools
• Break Point
• redux-logger (maybe later?)

[rwieruch]

Hey @sujinleeme Thank you for your recommendations 👍 Maybe we can discuss them here and see how we can synchronize them in all (translated) books :)

Debugging React with Chrome and React Developer Tools would be a great additional chapter. Maybe in the end of the book? Maybe it can touch Break Points too even though I think it's not necessarily related to React. What do you think?

The redux-logger is discussed in Taming the State in React. Because The Road to learn React doesn't introduce Redux, it wouldn't make sense to show redux-logger.

If someone has time to introduce such a chapter in the English version of the book in the first place, let me know. Otherwise I can do it at some point :)

CC @JimmyLv @GuillaumeUnice @FrankFlow @romerorocha

[romerorocha]

Should it be a dedicated chapter7.md file, about the "Debugging" subject, containing chapters like:

Debugging React with Chrome

React Developer Tools

Or, just a chapter in the end of chapter6.md?

I think that debugging is important enough to have it's dedicated section, but I'd be happy to write any of these options.

[rwieruch]

I would maybe see it as another section in chapter 4, because that's the chapter where testing and folder structures are explained. What do you think?

[romerorocha]

Sounds good! I'll try to get it done and send it to evaluation soon.

[rwieruch]

Great 💯

[romerorocha]

So, my idea here is to explain the main purpose of React Developer Tools and how it works. Inspecting your true components (instead of raw HTML DOM nodes), props, changing state to see what happens, jumping to related source code and so on.

I agree that using Chrome Dev Tools for debugging the source code, inserting breakpoints and stepping in/over them are not necessarily React related knowledge. So, regarding that, would it be ok if I just mention a tutorial link like https://developers.google.com/web/tools/chrome-devtools/javascript/ in the "Exercises" section?

[rwieruch]

I agree with both things. React Developer Tools should be the main topic here. Maybe it is possible to relate a bit to the application which is built up until then in chapter 4. Mentioning Chrome Dev Tools in the exercises makes sense as well.

[rwieruch]

Done by @romerorocha in #151 🎉