04 - React JS: Debugging an App

Introduction

Debugging ReactJS

Several steps to make the debugging process easier:

• Check the Browser’s console: Look for any error message error in the browser’s console
  • Often, errors will be logged in the console, which will give you an idea of where to start debugging
  • You can learn more about this here: MDN Web Docs - Console
• Use React Developer Tools: browser extension that provides a suite of tools for debugging and profiling React components
  • It allows to inspect React component hierarchies and track the flow of data between components
  • Learn more about using React Developer Tools here: React Developer Tools
• Use console.log(): Place console.log() statements through your code to print out variables and see how they change as the code executes
  • Learn more about using console.log() here: MDN Web Docs - Debugging JavaScript
• Breakpoints: Set breakpoints in your code using the browser’s developer tools or an integrated development environment (IDE) like Visual Studio Code
  • This allows you to pause the execution of your code and step through it line by line, inspecting variables and the state of your components
  • Learn more about using breakpoints here: Chrome DevTools - Debugging JavaScript