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 ✨
Other patterns
-
silent errors
-
lifecycle hooks
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