Carlos deArtola monogramCARLOS DE ARTOLA
BUILD

DesInspect

A Chrome extension that puts a DevTools-style inspector in the side panel and keeps every CSS and HTML edit across reloads, logins and route changes.

STACK
JavaScript · Chrome Manifest V3 · IndexedDB
HOW IT'S BUILT
FROM THE README

What's under it.

  1. Why I built it

    When I review UI on a live site, I tweak styles in DevTools to try a fix, and every refresh wipes it. DesInspect keeps those edits, so I can work a design problem in the browser and come back to it.

  2. DevTools, in the side panel

    A collapsible DOM tree over Styles, Computed, Box, HTML, Changes and Snapshots tabs, with click-to-edit values and a pick mode.

  3. Edits that stay

    Every edit is written to IndexedDB, scoped to the page, and re-applied after a refresh, a new session, or a single-page-app route change.

  4. Snapshots

    Named save points of the whole changeset, restorable in one click.

RECORDING
On a live site: pick the headline, change its size and color, reload, and the edits come back.