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
Embrace bugs intentionally with a learning mindset
Happy debugging!
🕵🏽♀️🐞
Thank you!
@ceceliacreates
Painless Debugging
By Cecelia Martinez
Painless Debugging
Developers spend up to half their time debugging code, but often struggle to find an effective and efficient debugging process. With the right approach, debugging can actually be a fun learning experience that sheds light on underlying issues and areas of improvement in your codebase. This talk will break down debugging as a process, including defining a bug, approaching the problem, how to use tools and collaboration effectively, and evaluating systemic reasons bugs happen. We'll also walk through some common types of bugs that occur in JavaScript applications to frame how you approach future issues.
