Cleaning the Tar: Using React within the Firefox Developer Tools
summary
Claim: migrating Firefox Developer Tools to a pure functional UI using React and Redux produces concrete wins: a single-atom app state that enables deterministic time travel and a working record-and-replay/time-travel debugging demo, plus action logs that expose every state change. Migration happens incrementally (emitters bridge old mutation code), not by a full rewrite. Tools used include React, Redux, seamless-immutable and gen-test style generators; hot reloading and component shallow rendering speed development and testing; demos work but aren’t production-deployed yet.
AI-written summary · about
chapters (37)
- 0:00Introduction
- 0:35The Tar Pit
- 1:43The Web Console
- 2:54The underlying problem
- 3:27The current landscape
- 4:05State as an explicit object
- 4:53Current apps
- 5:14Single atom app state
- 7:06Demo
- 11:04DOM
- 11:24Reactive
- 11:36Redux
- 11:55Closure
- 12:25Workflow
- 12:55Dispatch
- 13:37Initial State
- 14:16Switch Statement
- 15:14Modular Update Functions
- 15:50Demonstration
- 19:52React Dev Tools
- 20:22State Changes
- 20:51Assign Break Points
- 21:49Migrating Existing Code
- 22:39After the First Pass
- 23:57Benefits of React
- 26:25ActionCreator
- 26:51DispatchState
- 27:21Action Creators
- 28:38Promises
- 29:49Redux Framework
- 32:01Testing is not fun
- 33:06Shallow renderer
- 33:51Gen test
- 35:33Propertybased testing
- 35:48Immutable libraries
- 36:15Component local state
- 37:56Questions
related talks
31mDebugging Your Debugger
28mWriting better multi-process hybrid apps with React and Redux
26mDebugging the Debugger
26mDebugging the Debugger
35mDebugging JS and React
26mReact Developer tooling
27mChrome DevTools: State of the Union 2024 - Debugging React & Beyond
26mTime travel debugging: A step-by-step guide