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 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 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

• Browser extension or package for non-browser-based applications
• View components and relationships
• View/edit props and state
• Profile render performance
  • Reading profiler performance data
• https://react-devtools-tutorial.vercel.app

Redux DevTools

https://github.com/reduxjs/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

https:/replay.io/examples

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

Jenn Creighton, @gurlcode

Sr. Software Engineer @ Netflix

Host of @single_threaded podcast

https://www.youtube.com/watch?v=V-lu0YjJYdk

• Reinforce process

• Identify patterns

Component Rendering

• Blog: When Does React Render Your Component?
• Replay: Comment shifting
• https://beta.reactjs.org/learn/render-and-commit​

State & Hooks

• local vs global state updates
  • Replay: Source explorer is visible
• Race conditions
  • caused by competing async functionality
  • View network request waterfall
  • Blog: Handling API request race conditions in React

Activity

• Buggy replay
• https://github.com/Replayio/hasreplay
• replayable.dev
• BYOB (Bring Your Own Bug)