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.

  • 1,652