Debugging Angular Apps
Angular Community Meetup
Cecelia Martinez
Community Lead, Replay.io
@ceceliacreates
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
@ceceliacreates
Who here has debugged this week? ✋
@ceceliacreates
Who here has debugged today? ✋
@ceceliacreates
Developers spend up to half their time debugging and maintaining software.
@ceceliacreates
Who here has a defined process for debugging? ✋
@ceceliacreates
The right process, tools, and experience can make debugging better
(I promise)
@ceceliacreates
Process
@ceceliacreates
@ceceliacreates
What?
Why?
How?
What is the problem?
Why is it broken?
How did this happen?
@ceceliacreates
What is the problem?
- Reproducible example
- Expected behavior
- Defined problem
@ceceliacreates
Why is it broken?
- Multiple hypotheses
- Isolate the issue
- Trace the root cause
@ceceliacreates
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
@ceceliacreates
Angular DevTools
@ceceliacreates
Redux DevTools
@ceceliacreates
Replay
@ceceliacreates
Experience
@ceceliacreates
@ceceliacreates
Jenn Creighton, @gurlcode
Sr. Software Engineer @ Netflix
Host of @single_threaded podcast
@ceceliacreates
Common sources of Angular bugs 🐞
- Fighting against the framework
- Lifecycle Hooks
- Race conditions
- Multiple sources of truth
- Event handling
- SYNTAX
@ceceliacreates
Over time, fixing these bugs will become second nature.
Practice!
@ceceliacreates
Let's look at some bugs!
@ceceliacreates
Share your own bugs!
@ceceliacreates