Debugging React Applications

What do you call someone who writes buggy code?

A developer.

Cecelia Martinez

Community Lead,


⭐️ GitHub Stars Program

🏳️‍🌈 Out in Tech Atlanta Chapter Head

👩🏽‍💻 Women Who Code Front End Volunteer

✅ Unofficial Cypress Ambassador


Weekly Office Hours at

Get Started

Who here has debugged in the past week? ✋

Developers spend up to half their time debugging and maintaining software.





border:1px solid red


The right process, tools, and experience can make debugging better.


Process 🔎

What does your debugging process look like?

Process refers to the methodology used to approach the problem.


  • What steps did you follow the last time you debugged?

  • How do you decide where to start debugging?




What is the problem?

Why is it broken?

How did this happen?

What is the problem?

  • Reproducible example
  • Expected behavior
  • Defined problem

Why is it broken?

  • Multiple hypotheses
  • Isolate the issue
  • Trace the root cause

How did this happen?

  • Could a test have caught this?
  • Using framework correctly?
  • Other areas of codebase with same implementation?

Find a process that works for you.


Tools 🧰

Tools are what you use to execute your process.

Developer Tools

  • Browser or IDE
  • Inspecting (elements, state, values)
  • Evaluating (execution, control flow, performance)



  • Elements
  • Sources
  • Network
  • Application

React DevTools

Redux DevTools

  • Inspect dispatches, actions, state diffs
  • Also works for NgRX, Mobx, etc.

  • Record browser session or automated tests
  • React and Redux (beta) DevTools built in for debugging
  • Retroactively add console logs
  • Add comments
  • Code heat maps


Experience 🐞

Maybe the real treasure was the bugs we fixed along the way ✨

Jenn Creighton, @gurlcode

Sr. Software Engineer @ Netflix

Host of @single_threaded podcast

  • Reinforce process

  • Identify patterns

State & Hooks


Learn More

Thank you!

Debugging React Applications Workshop

By Cecelia Martinez

Debugging React Applications Workshop

  • 6,467