Vebug

🐞 A visual component debugger packaged as a React Component 🐞

Easily visualize the total space of your components (including margin and padding)

🚀 Quick start

1. Installation

   # npm
   npm install -D vebug
   
   # yarn
   yarn add -D vebug

2. Wrap the component you want to debug

   <Vebug>
     <YourComponent />
   </Vebug>

Features

Vebug will automatically calculate the DOM depth of your component and colorize every child element. Don't like the colors? Refresh and new colors will be generated.

Toggle z-index indicator (v1.0.4+)

Shortcomings

Vebug works by overriding the CSS of its children, but will not override CSS styles defined directly on any component defined by ID.

Release Notes

v1.0.5

• Reduced package size by 91%

v1.0.4

• Added z-index indicator toggle

v1.0.3

• Bug fixes

v1.0.2

• Bug fixes

v1.0.1

• Bug fixes

v1.0.0

• First production release

License

MIT Licensed. Copyright (c) Stack Cache 2019.