Time Travel Debugging JavaScript Applications
slides.com/ceceliamartinez/time-travel-debugging
The current state of debugging
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
🛠🐞
A new dimension
Time Travel Debugging
-
record and replay a trace of your application execution
-
rewind, fast forward, and pause at different points of time to debug
cypress.io
playwright.dev
github.com/reduxjs/redux-devtools
Better debugging leads to better understanding of our application
“We don’t understand all the possible ways in which the programs we have written can execute.
When a program behaves in a way we don’t expect, we are often at a loss when we want to know why.”
Kannan Vijayan
Software Engineer, Replay
A trace or replay captures complex information about application execution
Better debugging leads to better understanding of frameworks
event
listener
event
handler
loading
state
API
request
request
handler
business
logic
update
db
send
response
handle
response
update
store
end
loading
update
DOM
Better debugging leads to better understanding of bug patterns
Patterns
- Component Rendering
- What triggers a render?
- State
- Multiple sources of truth
- Accidental mutation
- Competing dispatches of actions
- Error handling
- Silent errors
- Passing errors
Embrace bugs intentionally with a learning mindset
Resources
Thank you!
slides.com/ceceliamartinez/time-travel-debugging