Debugging Vue Applications

VueConf 2022

 

Cecelia Martinez, Replay.io

@ceceliacreates

@ceceliacreates

Cecelia Martinez

Community Lead, Replay.io

Atlanta, GA


⭐️ GitHub Stars Program

🏳️‍🌈 Out in Tech Atlanta Chapter Head

👩🏽‍💻 Women Who Code Front End Volunteer

✅ Unofficial Cypress Ambassador

✋👩‍🏫🐞

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

TypeError: "x" is not a function
  • typo in function name

  • wrong prototype

  • variable is wrong type

  • Missed import

Jenn Creighton, @gurlcode

Sr. Software Engineer @ Netflix

Host of @single_threaded podcast

https://devtools.vuejs.org

(Shoutout to @akryum!)

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

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

But what about the framework itself?

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.

Embrace bugs intentionally with a learning mindset

  • practice

  • pair

  • help others

Thank you!

@ceceliacreates

Fridays 11a PT/2p ET on replay.io/youtube

debugging-vue-applications

By Cecelia Martinez

debugging-vue-applications

  • 2,741