Styles Debugger
A helper for visually debugging css-in-js styles. Works both with template literals or objects.
Made by Kitze
Install
yarn add styles-debugger
Demos
Basic usage
With template literals
;; const Header = styleddiv` ;`;
With objects
;; const Header = ...;
Show text along the border
const Wrapper = styleddiv` ;`;
Show text + customize options
const Footer = styleddiv` ;`;
Initialize custom instance
Instead of using the default debug
function you can create your own debugger.
Initialize it in some file and customize it the way you want.
; const debug = ; ;
Configuring the debugger
; const debug = ; ;
Configuration options
enabled
: if this is set tofalse
debug mode will be turned off for all the components (default istrue
)position
: pick the corner position for the text: options are1 | 2 | 3 | 4
(default is1
)color
: which should be a default color for the border of the element (by default it's a random color)debugWith
: what should be used for debugging the elements:border
orbackground
(default isborder
)borderSize
: if using border for debugging, specify the size of the border (default is 1)showText
: enable or disable showing text with pseudo elements for each component (default is true)pseudoElement
: which pseudo element to be used:after
orbefore
styles
: an object that can be passed to completely override the styles forelement
(the element that is debugged), andtext
(the pseudo element with the text).
debug
Available params for debug(text: String, params: Object)
Each debug
function call can override the default params object for the debugger with a custom object. So for example if for some element you would like to use specific options for debugging you can just pass them as the params
parameter.