u/Blozz12

The question is in the title.

I've been using devtool in my own personal way for debugging and working with CSS for almost a decade now. But I never really took the time to see how other devs are using it. I'm sure I'm missing on a lot of cool features or ways of doing.

(I saw that Ahmad Shadeed wrote a book about it, but I don't know what to expect from it)

I’m curious about how other frontend developers use browser DevTools for CSS work.

Personally, I rely on it a lot. Not only when something is broken, but also while building the UI. I often tweak spacing, colours, font sizes, layout values, responsive behaviour, etc. directly in DevTools before moving the final values back into my code.

For me, it’s become a real part of the development process, not just a debugging tool.

So I’m curious:

Do you mainly use DevTools to debug CSS issues or do you also use it while designing/building the page?

What does your usual process look like when working on CSS in the browser?

I recently wanted to use CSS Scan, but for my use case it felt a bit too expensive.

What I actually wanted was something simpler:

• hover any element and instantly see its CSS
• click to pin the inspector
• edit CSS directly on the page
• copy the CSS when I’m done
• keep computed styles separate from editable source styles
• support pseudo/media scoped styles where possible
• no account, no subscription, just a small Chrome extension

So I built a free Chrome extension called CSS Explorer.

It’s not trying to be a full DevTools replacement. The goal is more: “I’m working on frontend UI, I want to inspect/edit/copy styles quickly without opening the full DevTools panel.”

It’s still early, and I’m mostly looking for feedback from frontend developers:

• would this actually can interest you?
• what feels missing?
• what would make you use this instead of DevTools?

Hey everyone,

I’m building a chrome extension around a problem I keep running into: I open DevTools, delete a popup, hide a sticky banner, remove a distracting block, tweak some CSS… and then everything is gone after a reload.

The idea is to make those quick browser edits persistent.

So if a website has an annoying newsletter modal, floating ad, cookie banner, sidebar, paywall-style overlay, or any other element you don’t want to see, you could remove it once and have that change come back automatically next time. It could apply only to the current page, or to the whole domain if that makes sense.

The other side of it is for experimenting. Sometimes I’m adjusting spacing, colors, font sizes, classes, or small bits of HTML directly in DevTools just to see what looks better. The extension would keep track of those changes too, so instead of trying to remember “what did I change again?”, you’d have a clear record of the useful tweaks you made in the browser.

So it’s partly a way to clean up websites you visit often, and partly a way to save visual experiments before deciding whether to recreate them properly in your code.

I’m trying to understand if this is actually useful to people, or if it sounds like something that would be nice in theory but not part of your real workflow.

Would you use a tool like this? Do you see any other interesting features I could add?