Show HN: Debucsser, CSS debugging made easy | Hacker News Reader

Show HN: Debucsser, CSS debugging made easy

github.com

63 pointslucagez20 comments

This is neat!

My wife is beginning to learn some web design. Her laptop has a low-res screen (1366x768) so dev tools takes up a lot of space when open. When she's tinkering with layouts, she occasionally adds/removes borders to help interpret what's going on.

It's probably most useful to people who are starting out, so my one suggestion might be to make it even easier to install -- e.g. if `npm install debucsser` would make it work with a create-react-app app (and other common scaffoldings).

I didn't thought about that, thank you for pointing out

Don't worry about the name. A bad name won't hurt your project. What will hurt your project is calling out how bad your name is in the project description.

You have a short sentence to sell me a reason to read more of your readme but instead you use that time to point out the issues with the project name.

(I wrote a thing called floatthead which is an aweful name, but no one has ever complained about _that_)

floatthead isn’t an awful name. It’s essentially meaningless. Bad names can make projects not take off as much as they would have due to ambiguity, unpleasant associations, and difficulty of expressing support. We often don’t hear about those projects precisely because they don’t succeed.

Introduce the project like this

"Debucsser, CSS debugging made easy" (pronounced de-buk-sir)

better yet (or not)

You could find someone to draw a little cartoon in the style of the New Yorker showing a herd of deer, one of them with enormous antlers, and two men with hunting gear (a butler and his master, or a king and his servant. something like that).

The caption would read. "Which one do I shoot?" "De buck, sir. Only de buck."

Haha so funny, thank you

Calling out the bad name was what really got my attention for this project, in a good way, so I don't think it's generally a bad practice

Feel like this should be a browser extension instead of a library

or just use it as a bookmarklet ?

This looks useful, thank you for sharing. I think the name is more than fine. It may look and sound weird but that is due to being unusual and that is totally ok. It is is unique, possible to find via search engine. It is immediately obvious that it relates to css. It is pronouncable as debuxer. My suggestion would be to stop depreciating your work.

Looks great, simple tool to quickly see some info.

One note i have is the gif demo is so fast i can't see easily what content it is you show.

I often use http://www.sprymedia.co.uk/article/visual+event+2 as a bookmarklet to quickly see what elements trigger what events.

It would be great if your tool could be a bookmarklet as well just to reduce dependencies in the actual code.

Reminds me of Pesticide, which is a great CSS debugging extension - I think I'd be more likely to try Debucsser out if it was an extension.

Similar to [CSSScan](https://getcssscan.com/), which is a paid Chrome extension that I use. Any benefits over this besides being open source and free, as I don't mind paying for a quality product?

Does this offer the ability to copy the applied styles of the element you're hovering over?

Kind of. You can apply a custom class to every element you hover on

That's not what I mean.

A lot of what I do often involves finding the existing CSS styles applied to a page, and copying them to a new page. I think that a way to copy the styles of the currently selected item would be very helpful.

Nice! Looks like this could be a useful tool for sure. But seriously; think of a new name. :)

Nice little thingy... would say it isn't that useful yet, as the displayed info isn't configureable ( and i rarely need container dimensions. Made something similar for a angular-project of mine. Good work.

Given the consensus I could also make a chrome extension as well

Reply on news.ycombinator.com