Rebug

Disclaimer: Experimental project. APIs might change, use at your discretion.

Declaratively debug your component visually at per-component level.

Usage

/* Shows component display name and DOM tag name/dimensions if possible */
import { debugComponentName } from 'rebug'

class YourComponent extends React.Component{
  render(){
    return <div>My Component</div>
  }
}

export default debugComponentName(YourComponent)

Or use it as decorator:

@debugComponentName
class Component extends React.Component {
  /*...*/
}

You can customize your debug configuration:

import debug from 'rebug'
const config = {
  /* styles (currently it is the styles of wrapper component) */
  styles: {
  },
  /* styles when component is hovered. */
  hoveredStyles: {
    boxShadow: "0 0 0 1px royalblue",
  },
  /* the debug view configuration, it's visible when component is hovered */
  debugView: {
    /* Shows the component name */
    ComponentName: {
      styles: {
        background: 'royalblue',
      }
    },
    /* Shows the DOM tag name and dimensions */
    DOMTagName: {}
  }
}
export debug(config)(YourComponent)

You can debug connected components as well:

export debug(config)(connect(SomeComponent))

Features

• [x] Show component's name, DOM tag name, dimensions
• [ ] WIP: inspect component props and state
  • [ ] detect state change

Implementation and known issues

The goal is to overlay (it doesn't have to be a wrapper) the debugging segment on the original component.

Currently YourComponent is wrapped in an additional div. This might not work for some cases. Since border is rendered using box shadow, it might get blocked by the box shadow of the component to inspect.

Another approach is to render the additional component into the DOM tree on componentDidMount. Also need to check the support in React DevTools API.