A visual debugger for React development

Usage no npm install needed!

<script type="module">
  import vebug from '';


vebug banner

🐞 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

      <YourComponent />


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


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


MIT Licensed. Copyright (c) Stack Cache 2019.