vebug

A visual debugger for React development

Usage no npm install needed!

<script type="module">
  import vebug from 'https://cdn.skypack.dev/vebug';
</script>

README

vebug banner


Vebug
🐞 A visual component debugger packaged as a React Component 🐞


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

vebug demo

🚀 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

vebug demo

Shortcomings

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

License

MIT Licensed. Copyright (c) Stack Cache 2019.