# debucsser

> CSS debugging tool with an unpronounceable name

Latest version **1.0.4** (published 2018-12-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install debucsser
pnpm add debucsser
yarn add debucsser
bun add debucsser
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2018-12-18 |
| First published | 2018-12-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1005 |
| Author | Luca Gesmundo |
| Maintainers | lucagez |
| Keywords | css, debugger, debugging, debug, debug, css, debugging, tool |

## Links

- npm: https://www.npmjs.com/package/debucsser
- Repository: https://github.com/lucagez/Debucsser
- Homepage: https://github.com/lucagez/Debucsser#readme
- Issues: https://github.com/lucagez/Debucsser/issues
- npm.io page: https://npm.io/package/debucsser

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2018-12-18
- 1.0.3 — 2018-12-10
- 1.0.2 — 2018-12-06
- 1.0.1 — 2018-12-06
- 1.0.0 — 2018-12-06

## README

![](/gif/debucsser.gif)

# DebuCSSer

CSS debugging tool with an unpronounceable name.

### [Codepen Demo](https://codepen.io/lucagez/full/LMEerQ)

## Installation

If you are using a bundler:

`npm install debucsser`

Alternatively: download debucsser.js in /module folder and link it in your HTML.

_**A chrome extension is under development**_

## Why

Debucsser is a simple CSS debugging tool made to be unobtrusive in your workflow.

I often find myself applying an "outline" to a lot of elements on the page to see their dimensions.

With Debucsser I simply hold **`CTRL`** and move my mouse around to see the dimensions in px and apply an outline class to every element I hover.

If you  hold **`CTRL`** + **`SHIFT`** you apply the outline class to all the elements on the page by adding a global class.

You can configure some parameters.

I find handy the possibility to specify a custom class I want to apply to different elements without the need to comment and uncomment the my css files.

## Usage

```javascript
// only if you installed via NPM
import Debucsser from 'debucsser';

// pass all the custom properties you want
const config = {
  color: 'palevioletred', // color of the outline
  width: '4px', // width of the outline
  grayscaleOnDebugAll: true, // apply grayscale filter to every element 
  customClass: 'exampleClass',  // a class existent in your stylesheet
}

// init the debugger
const debug = new Debucsser(config).init();
```

When you have done this, simply hold **`CTRL`** or **`CTRL`** + **`SHIFT`** and move the mouse around on the page.

## Props

|       property        |  propType    |    default    |                              description                              |
| :-------------------- | ------------  | ------------: | :-------------------------------------------------------------------- |
| `color`               | { string }   | palevioletred | Outline color.                                                        |
| `width`               | { string }   | 3px           | Outline width.                                                        |
| `style`               | { string }   | solid         | Outline style.                                                        |
| `grayscaleOnDebug`    | { bool }  | false         | Apply grayscale filter on hovered element while holding `CTRL`.       |
| `grayscaleOnDebugAll` | { bool }  | false         | Apply grayscale filter on all elements while holding `CTRL` + `SHIFT`.|
| `customClass`         | { string }   | null          | Apply custom class on hovered element while holding `CTRL`.           |
| `mainKey`             | {number}    | 17            | Set the key to use alternatively to `CTRL`.                           |
| `secondKey`           | {number}    | 16            | Set the key to use alternatively to `SHIFT`.                          |

## Contributing

Fork ➡ new branch ➡ PR 🎉

**TODO:**

- [ ] Make a usable chrome extension (very experimental by now)
- [ ] Improve default styling of label

If you have any idea on how to make Debucsser better don't hesitate 😎

#### License

MIT

---
_Source: https://npm.io/package/debucsser · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._