
Show HN: Debucsser, CSS debugging made easy - lucagez
https://github.com/lucagez/Debucsser
======
cldellow
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).

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

------
mkoryak
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_)

~~~
jspash
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."

~~~
lucagez
Haha so funny, thank you

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

~~~
Kyro38
or just use it as a bookmarklet ?

------
scns
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.

------
NationOfJoe
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](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.

------
jacobedawson
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.

------
cercatrova
Similar to [CSSScan]([https://getcssscan.com/](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?

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

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

~~~
bobthepanda
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.

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

------
FloNeu
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.

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

