gitwtfhub

wtf is react-transform-debug-inspector?

gaearon/react-transform-debug-inspector — explained in plain English

Analysis updated 2026-07-17 · repo last pushed 2015-09-03

★ 2JavaScriptAudience · developerComplexity · 3/5DormantSetup · moderate

TL;DR

A dev-only Babel-powered tool that adds an inspector panel to React components, letting you view props and state live without console.log.

Mindmap

mindmap
  root((repo))
    What it does
      Live component inspector
      Shows props and state
      Babel plugin hook
    Tech stack
      JavaScript
      React
      Babel
    Use cases
      Faster debugging
      Exploring unfamiliar code
    Audience
      React developers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Inspect a React component's live props and state without adding console.log statements.

REASON 2

Debug why a component isn't behaving as expected during local development.

REASON 3

Explore an unfamiliar React codebase by inspecting components as the app runs.

REASON 4

Add custom inspector panels to show project-specific debugging data.

What's in the stack?

JavaScriptReactBabel

How it stacks up

gaearon/react-transform-debug-inspector3imed-jaberi/cryptography-si-isamm3imed-jaberi/koa-isomorphic-router
Stars222
LanguageJavaScriptJavaScriptJavaScript
Last pushed2015-09-032021-09-252021-02-06
MaintenanceDormantDormantDormant
Setup difficultymoderateeasyeasy
Complexity3/51/52/5
Audiencedeveloperresearcherdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · moderate Time to first run · 30min

Requires modifying your Babel config and babel-plugin-react-transform, dev-only, not for production.

Yoink these prompts

Prompt 1
Show me how to wire babel-plugin-react-transform with this debug inspector in my project.
Prompt 2
Explain how to add a custom panel to the inspector for showing extra component data.
Prompt 3
Help me configure which components should be inspectable in this tool.
Prompt 4
Walk me through toggling the inspector on and off during development.

Frequently asked questions

wtf is react-transform-debug-inspector?

A dev-only Babel-powered tool that adds an inspector panel to React components, letting you view props and state live without console.log.

What language is react-transform-debug-inspector written in?

Mainly JavaScript. The stack also includes JavaScript, React, Babel.

Is react-transform-debug-inspector actively maintained?

Dormant — no commits in 2+ years (last push 2015-09-03).

How hard is react-transform-debug-inspector to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is react-transform-debug-inspector for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.

Other repos in this lane