Debugging with JS Frameworks
@ceceliacreates
slides.com/ceceliamartinez/debugging-with-js-frameworks
✋👩🏫🐞
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 🦸🏽♀️
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;
});
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
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
Debugging with JS Frameworks
By Cecelia Martinez
Debugging with JS Frameworks
Developers spend half their time debugging, but often don't have an effective process or understanding of debugging tools. JS frameworks like React, Angular, and Vue add to the complexity of debugging. This talk will break down an approach for JS Framework debugging, including how to use tools effectively to identify common patterns of bugs. Regardless of what framework you use or your level of debugging experience, this talk will help you debug more confidently.
