Cecelia Martinez

@ceceliacreates

Developer Advocate, Ionic

Open-source DevTools Enthusiast

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

🛠🐞

tinyurl.com/excalidraw-replay

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

replay.io/effective-determinism

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

github.com/Replayio/Protocol-Examples

docs.replay.io/recording-browser-tests-(beta)

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

https://www.youtube.com/watch?v=V-lu0YjJYdk

Jenn Creighton, @gurlcode

Sr. Software Engineer @ Netflix

Host of @single_threaded podcast

Patterns

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

tinyurl.com/redux-replay

github.com/replayio/devtools/pull/5203

Embrace bugs intentionally with a learning mindset

Resources

replay.io/examples

slides.com/ceceliamartinez

@ceceliacreates

Thank you!

slides.com/ceceliamartinez/time-travel-debugging