Recorder is a panel in DevTools that allows recording and replaying user actions.
components
folder contains lit-html components that implement Recorder-specific UI.images
folder contains Recorder-specific icons and images.models
folder contains the “business logic” part of Recorder wrapping DevTools SDK modules and Puppeteer to provide record/replay/import/export functionality. The name models
is historical and, probably, a better name could be found: record/replay used to be implemented as a single SDK Model and was placed in the models
folder in DevTools before ending up here.injected
folder holds the code that gets injected into the target page. This code is responsible for interpreting client side events and sending information about them to the models
.RecorderPanel.ts
is a light wrapper around RecorderController
that integrates with UI.Panel.Panel
, a generic interface for a top-level panel.RecorderController.ts
is the main class that is responsible for rendering the panel and holds the entire panel state.In general, there are 3 important use cases which the Recorder panel covers:
RecordingSession
is created.RecordingSession
attaches itself to all the targets and install a binding.injected
code into all the inspected targets.injected
code detects user actions on the target and sends them back to the RecordingSession
using the binding.RecordingSession
interprets the events from the client and updates the current recording.RecordingPlayer
instance gets created.SDK.TargetManager.TargetManager.instance().suspendAllTargets();
) and creates a PuppeteerConnection
.PuppeteerConnection
is sending and receiving messages on top of the original DevTools connection (which could be a web socket or a binding connection).RecordingPlayer
interprets the steps and translates them into Puppeteer commands.