Debugging with JS Frameworks

@ceceliacreates

slides.com/ceceliamartinez/debugging-with-js-frameworks

Cecelia Martinez

Developer Advocate

Appflow by Ionic (ionic.io/appflow)

 

@ceceliacreates

✋👩‍🏫🐞

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

Debugging is a superpower 🦸🏽‍♀️

tinyurl.com/excalidraw-replay

Debugging can help us better understand our application

Inspecting

  • Framework DevTools (Angular, React, Vue)
  • Browser DevTools (HTML, CSS)

Evaluating

  • Understanding the execution of code and how values change during execution
  • Live or time travel evaluation
  • Breakpoints
  • Console logs
  • Terminal evaluations

Debugging can help us better understand our frameworks

onRenderTriggered((event) => {
      debugger;
    });

https://vuejs.org/guide/extras/reactivity-in-depth.html#component-debugging-hooks

event

listener

event

handler

loading

state

API

request

request

handler

business

logic

update

db

send

response

handle

 response

update

store

end

loading

update

DOM

Debugging can help us better understand patterns

TypeError: "x" is not a function

  • typo in function name

  • wrong prototype

  • variable is wrong type

  • Missed import

Patterns

  • Component Rendering
    • What triggers a render?
  • State
    • Multiple sources of truth
    • Accidental mutation
  • Error handling
    • Silent errors
    • Passing errors

tinyurl.com/redux-replay

github.com/replayio/devtools/pull/5203

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

Embrace bugs intentionally with a learning mindset

Thank you!

@ceceliacreates

slides.com/ceceliamartinez/debugging-with-js-frameworks