Debugging React Applications

What do you call someone who writes buggy code?

A developer.

Cecelia Martinez

Community Lead, Replay.io

 

⭐️ GitHub Stars Program

🏳️‍🌈 Out in Tech Atlanta Chapter Head

👩🏽‍💻 Women Who Code Front End Volunteer

✅ Unofficial Cypress Ambassador

@ceceliacreates

Weekly Office Hours at replay.io/youtube

Get Started

Who here has debugged in the past week? ✋

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

console.log

debugger

DevTools

breakpoint

border:1px solid red

//

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

Really!

Process 🔎

What does your debugging process look like?

Process refers to the methodology used to approach the problem.

Activity

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

  • How do you decide where to start debugging?

What?

Why?

How?

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.

Break

Tools 🧰

Tools are what you use to execute your process.

Developer Tools

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

Activity

https://hot.opensauced.pizza/

 

  • Elements
  • Sources
  • Network
  • Application

React DevTools

Redux DevTools

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

Replay.io

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

Break

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

Activity

Learn More

Thank you!

Debugging React Applications Workshop

By Cecelia Martinez

Debugging React Applications Workshop

  • 5,777