Debugging Apps with JS Frameworks

@ceceliacreates

@ceceliacreates

console.log

debugger

border: solid 1px red

// broken?

// broken?

:headdesk:

StackOverflow

DevTools

@ceceliacreates

Developers spend up to half their time debugging and maintaining software.

@ceceliacreates

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 by identifying patterns within frameworks

@ceceliacreates

TypeError: "x" is not a function

@ceceliacreates

  • typo in function name

  • wrong prototype

  • variable is wrong type

  • Missed import

@ceceliacreates

🛠🔎🐞

@ceceliacreates

Framework DevTools

@ceceliacreates

  • React
  • Angular
  • Vue
  • Redux DevTools (Also works on Vuex, NgRX, Mobx, and more!)

@ceceliacreates

  • Browser or IDE
  • Inspecting (elements, state, values)
  • Evaluating (execution, control flow, performance)

Framework DevTools

⚡️

event

listener

event

handler

loading

state

API

request

request

handler

business

logic

update

db

send

response

handle

 response

update

store

end

loading

update

DOM

Replay lets you record your application to create a shareable recording with built-in debugging tools.

replay.io

Maybe the real treasure was the bugs we fixed along the way ✨

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

Thank you!

@ceceliacreates