Track CSS changes with a diff

Every edit you make on a page lands in the Changes tab as a diff: original lines removed, new lines added, the exact characters that changed highlighted. Copy the result into your code or revert any change on its own.

What it tracks

The Changes tab sits next to the CSS tab in edit mode. It collects everything you have changed on the page, from every kind of edit:

• CSS rule edits: changes to the page's own stylesheet rules, including edited selectors and rules you added, grouped by the stylesheet they belong to.
• Inline style edits: changes made to a single element from Effective Styles.
• Class edits: shown as the element's opening tag with the class attribute diffed, classes added and removed.
• HTML edits: elements you deleted appear as removed, duplicated or pasted ones as added, and edited elements get a line-by-line diff of their markup.
• Text edits: anything you typed with Edit Page Text, as a markup diff of the element you changed.

The header shows how many elements and edits are on the page, so you always know how far you have drifted from the original.

How the diff reads

Each block reads like a code review. Original lines are marked as removed and new lines as added, with character-level highlights on the parts that actually changed, so 40px to 48px highlights just the digit. CSS blocks show line numbers anchored to the real line in the source stylesheet where Screen Ruler can find it, and unchanged lines around each change collapse behind an expandable row. Long runs of added or removed markup fold the same way.

Edits made inside @media and other at-rules stay wrapped in their at-rule, so a copied block is valid CSS you can paste straight into the right file.

Rule changes are grouped by stylesheet, the way the DevTools Changes drawer groups them, so all the edits for main.css sit in one block and the rules you added yourself sit in their own. Class edits and HTML edits get one block per element, labelled with the element's selector, so a page with many changes stays easy to scan.

How to use it

1. Start Screen Ruler with Alt + Shift + S (Option + Shift + S on a Mac) and click Edit in the control bar.
2. Make your edits with the CSS editor, the HTML tools or Edit Page Text.
3. Switch to the Changes tab at the top of the side panel.

From there:

• Copy a block to get ready-to-paste CSS for that stylesheet, or the new markup for an element.
• Revert one block to undo just that change, leaving the rest in place. Reverting an HTML block can itself be undone.
• Clear All Changes from the header to put the page back the way it was.
• Hover an element's block to highlight it on the page, and click its selector to select it.

Limits

• Changes are tracked for the page in your current tab. Reloading clears everything except rule edits you have saved per site, which come back as individual, revertable entries.
• Edits the page's own scripts make are not tracked, only the ones you make with Screen Ruler.
• Only changes that differ from the original are listed. Reordering classes, or typing a value and then putting it back, does not count as an edit.

When it is useful

• Handing off to developers. Send a precise diff instead of a screenshot with arrows.
• Turning experiments into code. Tweak freely, then copy only what worked.
• Keeping experiments honest. See every change at a glance and undo the ones you no longer want.
• Working with AI agents. Through the MCP Server, a coding agent can read the same list of edits you made and apply them to your source.

Per-Element Change Tracking with Diff is a Studio feature. Every install starts with a free 7-day trial with everything unlocked, no card needed.

Common questions

How do I see what CSS I changed in the browser?

With Screen Ruler in edit mode, open the Changes tab in the side panel. Every edit is listed as a diff, grouped by stylesheet, with a copy button for ready-to-paste CSS.

How is this different from the Changes panel in Chrome DevTools?

DevTools tracks stylesheet edits made in DevTools. Screen Ruler tracks CSS, class, HTML structure and text edits in one list, lets you revert each change on its own, keeps media query wrappers in the copied CSS, and shows line numbers from the source stylesheet where it can.

Can I undo a single change without losing the others?

Yes. Each block in the Changes tab has its own revert action. Use Clear All Changes only when you want to reset everything.

Does the change list survive a page reload?

CSS rule edits can, when they are saved per site: they are restored the next time you activate Screen Ruler there and show up in the list again. Class, HTML, text and inline style edits reset on reload.