CSS Recorder

Records CSS/HTML edits from Chrome DevTools and reapplies them across page reloads.

CSS Recorder captures CSS and HTML edits made in Chrome DevTools and lets you reapply them after reloads. DevTools is great for experimenting, but those edits are usually temporary. A refresh or navigation can wipe out your work and force you to repeat the same changes again. CSS Recorder solves that by recording supported edits made in DevTools, saving them as patches, and letting you apply them again whenever you need them. CSS Recorder can capture HTML attribute changes such as class, style, id, hidden, and data-* attributes. It can also capture text edits made in DevTools, DOM element removals, tag renames such as h1 to h2, inline style tag edits, inspector-created stylesheet changes, and explicit CSS resource saves committed from DevTools. External CSS edits are partially supported and replayed as injected overrides. The workflow is simple. Open DevTools for the current tab, make your edits in the Elements or Styles workflow, let CSS Recorder save the supported changes as patches, and reapply them after reloads. You can also promote page-level changes so they apply across the same domain. CSS Recorder is also useful for cleaning up websites you visit often. If a site contains annoying popups, cookie banners, ads, or other unwanted interface elements, you can remove or hide them in DevTools, record those changes, and keep reapplying them when you come back. This makes it easier to create a cleaner, less distracting browsing experience on the sites you use regularly. CSS Recorder is useful for preserving UI experiments across reloads, testing layout and typography changes before editing source files, iterating on content and structure directly in the browser, validating fixes across multiple pages, and speeding up debugging and QA when temporary in-browser changes need to be replayed consistently.