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 🐞

@ceceliacreates

Over time, fixing these bugs will become second nature.

 

Practice!

@ceceliacreates

Let's look at some bugs!

@ceceliacreates

Share your own bugs!

@ceceliacreates

Thank you!

Debugging Angular Apps

By Cecelia Martinez

Debugging Angular Apps

  • 2,201