Screen Ruler is a Chrome extension that makes devtools friendlier ✳︎ designed, built, and maintained solo.
It started as a ruler
Screen Ruler was the first tool I built after teaching myself JavaScript, and it started with literally just measurement overlays. I was amazed at other extensions like Measuremate that felt like using Zeplin on a live page and I wanted to build my own. I launched it in March 2024 and I increased the UI surface to include a side panel that showed details about the element that was selected. It grew steadily on word of mouth, then took off when Google featured it in the Chrome Web Store's monthly spotlight.
The editing holdout
For a couple of years, Screen Ruler remained an inspection-only utility. I considered it part of the product's identity. But the question that kept coming up from users was “Ok but how do I edit?”. At the start of this year, I caved and ported over an atomic CSS engine from another extension I'd built and subsequently worked towards parity with DevTools while keeping the spirit of editing effective styles per element. As a result of this change, I split the upgrade tiers for those who require editing and those who don't. I'm glad the identity grew. Editing closes the gap on what the tool can do and I hear from users and teams that they've all but replaced DevTools with Screen Ruler now.
Killing the AI chat, twice
I built an AI chat into Screen Ruler. AI panel, agentic turns, the ability to call Screen Ruler's tools… then I deleted it. The truth is, I didn't want Screen Ruler to become another AI subscription to think about, and with the popularity of MCP servers growing I saw this as a better option for me. The Studio tier now comes with access to an MCP server so the agents people already use can drive the extension. You can read more about the agent tools here.
The site runs the real UI
As a designer I'm always making tweaks and improvements to Screen Ruler's visualisations, so keeping the site's screenshots up to date started to become a bit of a bottleneck. This year, I moved the landing page into the extension's repo. The plan was that a build script would extract the extension's CSS, scope it, and embed the real panels into the page. All visuals on the site are now rendered in code and much more maintainable than image assets.
