Painless Debugging
🕵🏽♀️🐞
@ceceliacreates
slides.com/ceceliamartinez/painless-debugging
Refactr.TECH 2022
@ceceliacreates
Cecelia Martinez
Developer Advocate
Appflow by Ionic (ionic.io/appflow)
Atlanta, GA
⭐️ GitHub Stars Program
🏳️🌈 Out in Tech Atlanta Chapter Head
👩🏽💻 Women Who Code Front End Volunteer
✋👩🏫🐞
console.log
debugger
border: solid 1px red
// broken?
// broken?
:headdesk:
StackOverflow
DevTools
Developers spend up to half their time debugging and maintaining software.
event
listener
event
handler
loading
state
API
request
request
handler
business
logic
update
db
send
response
handle
response
update
store
end
loading
update
DOM
event
listener
event
handler
loading
state
API
request
request
handler
business
logic
update
db
send
response
handle
response
update
store
end
loading
update
DOM
Fight complexity with the right process to identify patterns when debugging
What does your debugging process look like? ✋
Process refers to the methodology used to approach the problem
Reproduce
Define
How does the bug deviate from expected behavior?
Isolate
Inspecting
- Framework DevTools (Angular, React, Vue)
- Browser DevTools (HTML, CSS)
Evaluate
Collaborate
Maybe the real treasure was the bugs we fixed along the way ✨
TypeError: "x" is not a function@ceceliacreates
-
typo in function name
-
wrong prototype
-
variable is wrong type
-
Missed import
@ceceliacreates
Jenn Creighton, @gurlcode
Sr. Software Engineer @ Netflix
Host of @single_threaded podcast
Patterns
- Component Rendering
- What triggers a render?
- State
- Multiple sources of truth
- Accidental mutation
- Error handling
- Silent errors
- Passing errors