CSS debugging tool with an unpronounceable name
JavaScript
1,005
42 commits
updated Apr 4, 2019
CSS debugging tool with an unpronounceable name.
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
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.
// 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.
| 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. |
Fork ➡ new branch ➡ PR 🎉
TODO:
If you have any idea on how to make Debucsser better don't hesitate 😎
MIT
Overall
Maintained
Code review
npm
Latest release
Releases this year
9,912 followers · starred Jan 2019
56 followers · starred Jan 2019
136 followers · starred Dec 2018
25 followers · starred Apr 2019
CSS debugging tool with an unpronounceable name
JavaScript
1,005
42 commits
updated Apr 4, 2019
CSS debugging tool with an unpronounceable name.
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
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.
// 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.
| 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. |
Fork ➡ new branch ➡ PR 🎉
TODO:
If you have any idea on how to make Debucsser better don't hesitate 😎
MIT
Overall
Maintained
Code review
npm
Latest release
Releases this year
9,912 followers · starred Jan 2019
56 followers · starred Jan 2019
136 followers · starred Dec 2018
25 followers · starred Apr 2019