facebook / react-devtools

An extension that allows inspection of React component hierarchy in the Chrome and Firefox Developer Tools.

This project has migrated to github.com/facebook/react

The source code for the v3 of the extension can be found in the v3 branch.

To build the v3 browser extension from source:

git checkout v3

# Install dependencies and build the unpacked extension
yarn install
yarn build:extension

# Follow the on-screen instructions to complete installation

react-devtools's Issues

Attach a global to every page

Create a global variable on every page and have React register itself with that global. Avoids the need to do module loading (require) which can have side-effects. It also avoid race conditions. The upsell can be ignored when the global exists.

Firefox debugging support

First of all, let me say that I mostly love what you guys have done with react so far.

Unfortunately, I have to use Firefox while I'm at work. Is there any plan to port the debugger to Firefox? Or any tips you have to at least get something workable? If not, I will have to abandon my project which will make me sad.

More info:

Basically, I'm loading my javascript as a type="text/jsx" file and parsing it with JSXtransformer, but when I encounter bugs in my program, the console points to lines that do not exist in my html file as the source of the error. I know that react does some complicated things behind the scenes with DOM manipulation and that's the reason for this, but it makes debugging my application virtually impossible. I'd appreciate any feedback on this issue.

Thanks,
-Eric

PS: Would precompiling my scripts eliminate this issue? I'd need to know for sure so that I can tell if it'd be worth the trouble of building node from source.

Support Firefox

Due to Chrome’s bugginess I prefer developing in Firefox and creating workarounds for Chrome later.

Creating a version of this for Firefox’ dev tools would help me maintaining this workflow.

The sidebar doesn't show up in Canary

Using Chrome Canary, the sidebar is gone. Might be a breaking change coming or just a temporary bug in Canary.

React Developer Tools breaks natural scroll in Mac OS X

Originally posted by @jhsware in facebook/react#1315

---

When I activate React Developer Tools it breaks the natural scroll in source code in Chrome developer tools.

Mac OS X 10.9.2
Chrome 33.0.1750.152
React Developer Tools 0.8.1

1 Download and activate React Developer Tools
2 Inspect page source under Sources
3 Use two finger track pad scrolling

Expecting the scroll direction to be natural, but it scrolls in the reverse direction.

4 Deactivate React Developer Tools

Now it scrolls in natural direction.

This is really annoying and makes having the extension activated impossible during normal development.

Add inspect button

Add an inspect button within a toolbar above Props (like the debugging tools within the default Sources tab).

Should do the same as hovering over elements within the React Dev Tools tab.

Dependent upon #10.

Challenge here will be to communicate from the page towards the dev tool.

react-devtools for Safari

Maybe this is the wrong repo to request this, but it's becoming more and more common for people to build React apps embedded in ios webviews. The only way to currently debug those is using the Safari developer tools. It would be great if there was a port of the react-devtools for Safari.

Show troubleshooting tab if React cannot be found

Right now, if RDT doesn't think your page is Reactful, it will not draw the tab at all.

(Moreover, the best-practice of using webpack/browserify to load React will fail RDT's "is this page Reactful?" test, so the React tab will never draw.)

I propose that the React tab is always present. If RDT doesn't think the page is Reactful, it will say something to the effect of:

Sorry, but we couldn't find an instance of React on this page.

Make sure it has been exposed as window.React, then reload.
^{If you are sure it has been exposed at window.React and you are still seeing this message, [Click here] and we'll double-check.}

[Click here] will try to load RDT again without reloading the page (in case there's a race condition that's preventing RDT from seeing React).

DOM in React panel shows <unknown> after using a wrapper on JSX

JSX is quite annoying so I write myself a CoffeeScript binding:
https://github.com/jiyinyiyong/coffee-react-dom
It works but shows a lot <unknown> in the devtools:

There's an online version of the code in the picture:
http://repo.tiye.me/coffee-react-dom/index.html

And here is my implementation of my wrapper:

scope = {}

module.exports = (generator) ->
  generator.call scope

module.exports._init = (proto) ->
  bind proto

bind = (DOM) ->
  Object.keys(DOM).map (tag) ->
    scope[tag] = (prop={}, child...) ->
      if prop is scope then prop = {}
      DOM[tag] prop, child...
  {}

if window?.React?
  bind window.React.DOM

How does React tell the tag names and what should I do?

Expand and Highlight Components That are Responsible for Warnings or Errors

React has a warning module that allow us to intercept warning messages. These could be displayed inside the tree so that it's easy to spot which components are responsible for warnings or errors thrown and the properties passed into them.

Unable to set breakpoints

I'm unable to set any breakpoints within my JSX script. They simply don't trigger. I'm using the in-browser JSX transformer for now.

Open component's source code in editor from dev tools

I was experimenting ways to make development faster, and realized opening component's implementation from the DevTools to be incredibly useful. This is possible by leveraging editor supporting uri scheme (e.g. For rubymine, it's something like x-mine://open?file=/path/to/component.csjx). I've hacked a very custom implementation that works for my project, but would like to make it much more general and eventually send a PR for this.

Open questions in terms of UX are:

Configuration

I imagine users would need to be able to defined transform rules from Component name to file path. This could be as simple as defining a javascript function to do so:

function urlForComponent(displayName) { 
  return "x-mine://open?file=/path/to/" + displayName + ".csjx";
}

Where should that configuration screen be? I'm not familiar with common patterns for ChromePlugins when it comes to that.

Button to open file

My current prototype added a link in the side panel, but that feels wrong. Any suggestions in terms of best place for this link/button to be placed?

I'm hoping to nail down the UX with community feedback before moving on to proper implementation.

Components displayed as <Unknown ... /> when declaring js variables at the top.

I'm using grunt task to first build *.jsx files from *.coffee, and then build *.jsx to *.js files.
Therefore, my *.js files would be something like

var PhotoListWrapperView, PhotoListView,  PhotoView;
...
PhotoListWrapperView = React.createClass({
...
});

And with this js style, when I inspected into the React tab in Chrome, things displayed like:

<Top Level>
    <Unknown data="...">...</Unknown>
</Top Level>

When I tried to manually change the js variable declaration style to var PhotoListWrapperView = React.createClass({... , React inspection displayed correctly.

Look like declaring like var PhotoListWrapperView is a must for the tool to work. This may lead to some inconveniences. My case is an example.

Design a default screen when no React instance is detected

Currently we don't show the React tab if we can't detect React. We should have a better default screen that explains how you can get React and how to make it work with DevTools on your page.

[feature] Ability to move components anywhere in the structure.

It would be great to have the ability to move components from one place to another, much like the DOM inspector in Chrome does.

I realize that I could do it from Inspector directly, but I feel that this is a better abstraction (possibly styling leaks can be helped this way?).

Unknown component?

Hey guys,

This issue is in reference to: josebalius/ngReactGrid#1

The chrome extension seems to show Unknown for those React components that are defined the following way:

var myComponent = (function() {
    var anotherComponent = React.createClass({
        render: function() {
            return <div>Here</div>
        }
    });

    return React.createClass({
        render: function() {
            return <anotherComponent />
        }
    });
})();

Use myComponent anywhere else, and chrome react will show Unknown. I was thinking of changing my code but I wanted to double check with you guys that we shouldn't we defining components that way or maybe it is okay but you guys need to account for it.

Let me know, thanks!

Jose

No tab in Chrome 42

A couple of Play Store reviewers also mention Chrome 40

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/reviews?hl=en

[feature] Style information in the pane (and the ability to edit it as well)

If possible, the style information for each node like the DOM inspector, with the ability to edit in place.

Missing component names

Is there any reason why component names are always "Unknown"?

Just in case, I'm using browserify and sources are not minified, only concatenated.

Here's how it looks like:

[FEATURE REQUEST] Show event handlers on components and elements

Showing event handlers would be a useful feature similar to showing props on components. Something like onClick="...". So a consumer can understand at a glance where events are bound without digging directly into component source code.

Text nodes show a bunch of <Unknown> trash

Testing on React Developer Tools v0.8.1 from the Chrome Web Store, running Chrome 36.0.1985.125

This only started on the switch to v0.11.0.

http://fiddle.jshell.net/a90eq19z/1/show/
http://fiddle.jshell.net/a90eq19z/3/show/

This only seems to affect text nodes that are concatenated together, if I replace

return <div>Hello {this.props.name}</div>;

with

return <div>Hello World</div>;

It appears fine.

Test recording

I was thinking of an easier way to create tests for React components. Once ReactTestUtils becomes available it could be used by react-devtools for test recording.

What I think it should do:

• A recording should result in a testfile for jasmine, mocha etc.
• The recording should be modifiable within devtools.
• Should be possible to define expect statements.

Let me know what you think :-).

Self-closing elements aren't shown as such in tree view

Changes made in elements tab not reflected in react tab

ex: Deleting a node or changing attributes of a node not seem to be reflected in reacts tab.

React DevTools message gets thrown on the react homepage

React throws the 'Download the React DevTools' message on the react homepage even though window.React is available. I have the same issue with my dev projects. Can this be fixed? Running devtools v0.8.1.

React tab is blank when third-party cookies are blocked

If I use React Developer Tools in a Chrome profile that has "Block third-party cookies and site data" enabled in Content settings, the contents of the React tab are completely blank. Inspecting the inspector shows these errors:

Uncaught SecurityError: Access to 'localStorage' is denied for this document. Settings.js:131
Uncaught TypeError: Cannot read property 'domWordWrap' of undefined ReactPanel.js:67

The errors are thrown from these lines:

https://github.com/sebmarkbage/blink-devtools/blob/120a03721f07ecab689e5aa2444ed26094e5ede0/Source/devtools/front_end/Settings.js#L131

react-devtools/views/components/ReactPanel.js

Line 67 in 9879bdc

if (!WebInspector.settings.domWordWrap.get())

The relevant Chrome bug is https://code.google.com/p/chromium/issues/detail?id=319328#c4

If it isn't worth fixing, it might be worth detecting the problem and telling the user to disable third-party cookie blocking.

Overlay doesn't disappear when devtools are closed

[bug] sometimes tree items are empty & I can't inspect most of my app

I haven't figured out how to reproduce this reliably, but it happens several times a week. Refreshing the page fixes it.

Symptoms:

• inspecting element, then switching to the react tab, the tree is totally/mostly collapsed
• trying to expand components in the tree view shows them with apparently no children

Extension `require` scope leaks into page `require` scope

My application isn't using React, so disabling the dev tool extension "resolves" this. Though it seems that the react devtools extensions require() script is leaking it's scope into my application and injecting dependencies into my applications page level require() stack.

CSSTransitionGroup shows many <Unknown> layers

Not sure if this is an issue with the React transition add-on not setting displayName properly, but when using the CSSTransitionGroup, the React Dev Tools shows many layers of <Unknown> elements.

Note, I've just plugged in the example TodoList app from the docs

Code:

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var TodoList = React.createClass({
    getInitialState: function() {
        return {items: ['hello', 'world', 'click', 'me']};
    },
    handleAdd: function() {
        var newItems =
            this.state.items.concat([prompt('Enter some text')]);
        this.setState({items: newItems});
    },
    handleRemove: function(i) {
        var newItems = this.state.items;
        newItems.splice(i, 1);
        this.setState({items: newItems});
    },
    render: function() {
        var items = this.state.items.map(function(item, i) {
            return (
                <div key={item} onClick={this.handleRemove.bind(this, i)}>
                    {item}
                </div>
            );
        }.bind(this));
        return (
            <div>
                <button onClick={this.handleAdd}>Add Item</button>
                <ReactCSSTransitionGroup transitionName="example">
                    {items}
                </ReactCSSTransitionGroup>
            </div>
        );
    }
});

Elements Tab:

React Tab:

Would be nice to just show the CSSTransitionGroup wrapper.

Not working when using browserify

It just shows </Top Level> empty, since I'm using browserify.

I think this is logical, because React is not exposed to the global scope.

Is there a workaround, or an update coming for this?

Add keyboard shortcuts to sidebar

It would be awesome for debugging components if the increment/decrement keyboard shortcuts worked just like they do in the elements tab/styles sidebar.

https://developers.google.com/chrome-developer-tools/docs/shortcuts#styles-sidebar

getPropertyCSSValue is gone in Canary

I used to debug in Canary:

Version 40.0.2210.0 canary (64-bit)

Now it looks quite strange because I can't view props and state.

Then I found:

TreeElement.prototype.isEventWithinDisclosureTriangle = function(event)
{
    // FIXME: We should not use getComputedStyle(). For that we need to get rid of using ::before for disclosure triangle. (http://webk.it/74446) 
    var paddingLeftValue = window.getComputedStyle(this._listItemNode).getPropertyCSSValue("padding-left");
    var computedLeftPadding = paddingLeftValue ? paddingLeftValue.getFloatValue(CSSPrimitiveValue.CSS_PX) : 0;
    var left = this._listItemNode.totalOffsetLeft() + computedLeftPadding;
    return event.pageX >= left && event.pageX <= left + this.arrowToggleWidth && this.hasChildren;
}

gives exceptions since getPropertyCSSValue is no longer, probably it's now getPropertyValue:

x = window.getComputedStyle(this._listItemNode)
x.getPropertyValue('padding-left') // => "0px"

not sure what Canary is doing. But I think we need a fix.

Fails to load in Chrome 35, "Cannot read property 'injectedScript' of undefined"

Chrome 35.0.1916.153, running as pristine test user. Background page console says:

Error in event handler for (unknown): Cannot read property 'injectedScript' of undefined
Stack trace: TypeError: Cannot read property 'injectedScript' of undefined
    at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/device/RegisterExtension.js:47:57
    at disconnectListener (extensions::messaging:335:9)
    at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14)
    at EventImpl.dispatchToListener (extensions::event_bindings:395:22)
    at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14)
    at Event.publicClass.(anonymous function) [as dispatchToListener] (extensions::utils:65:26)
    at EventImpl.dispatch_ (extensions::event_bindings:378:35)
    at EventImpl.dispatch (extensions::event_bindings:401:17)
    at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14)
    at Event.publicClass.(anonymous function) [as dispatch] (extensions::utils:65:26) extensions::event_bindings:383
EventImpl.dispatch_ extensions::event_bindings:383
EventImpl.dispatch extensions::event_bindings:401
publicClass.(anonymous function) extensions::utils:65
dispatchOnDisconnect extensions::messaging:290

As far as I can see, it's supposed to perform an xhr request, but it doesn't do this.

Can't inspect state or props

See around 18.50 https://www.youtube.com/watch?v=kNVatRjnU7U . It used to expand with state and props information but does not work anymore.

Show possible values of enum props

It would be helpful to have possible values of enum props available in the sidebar. You get a console warning when using PropTypes.oneOf(/* {Array} */). A combo list (text entry + dropdown) would be great for enums in the sidebar. A popup auto-complete list when modifying enums directly in the components view would be really nice as well.

If it's not possible to get the propTypes object out of a React component, I think it would be worthwhile to make that feature request to support this.

Thanks!

Tools should display an additional field for the 'native js' version of Immutable objects

While working on a React/Flux project and having Immutables here and there, I've noticed that the dev tools become pretty silly when inspecting the state of an element that uses Immutable.

While first looking through the codebase, I noticed that the state of an object is being pulled and pushed to the sidebar here. With a bit of hacking around, I began to notice that there is no place where the actual values are read or passed around, but instead, only references to the values.

I'm not sure how possible this may be, but I feel that with the deep ties between React, Flux and Immutable, the dev tools should be able to detect an immutable and provide either an extra property on the state panel or a new panel altogether with the .toJS()'d version of the immutable to help developers work with these utilities.

Namespaced components don't appear

When I namespace my components, the devtools can't find them. Furthermore, they appear to have meaningless data-reactids (".0.0.0.0"). Example:

Game.Views.Page = React.createClass({
  render: function() {
    return (
      <section className="page">Hello, World</section>
    );
  }
});

I reference my component using Game.Views.Page(). Is JSX responsible for producing meaningful information for the devtools? Is there no way to reference namespaced components using JSX?

Link event listeners to source location

Click directly from an Event Listener in the React DevTools tab towards the implementation within the Sources tab.

Similar to the Event Listeners within the Elements tab.

Inspected component does not reset after page reload

1. Go to the test page, select & inspect some component inside the tree.
2. Reload the page
   The previously selected component is still visible in the props inspector. This can be especially confusing when comparing components before & after the reload.

Bonus wishlist feature: It would be awesome if the extension could select the equivalent node in the hierarchy after reload whenever possible (ie. the overall component structure hasn't changed too much)

Double scrollbars appearing when inspecting

Testing on React Developer Tools v0.8.1 from the Chrome Web Store, running Chrome 36.0.1985.125

When you inspect a React element, another set of scrollbars appear.

Bring component as a variable to console

Would be nice to have component available for tinkering in console when selected - so that I could inspect its props and state using code.

extend context menu

could be helpful if context menu in react tab provides shortcuts to

• edit
• setting breakpoints
• deletion

Clicking to expand nodes broken in Chrome 41.0.2218.0 canary (64-bit)

Reported by someone else in #reactjs - Using Chrome 41.0.2218.0 canary (64-bit) - when I click to expand a node in the React pane of dev tools, the node does not expand. It seems to work sometimes if I double-click the node but then it's impossible to contract again. Works fine as expected in Chrome Stable.

Not sure if this is a Chrome bug or a react-devtools bug, but figured I'd see if you guys knew anything. Maybe one of their APIs changed? Didn't see any relevant reports on Chromium bug tracker after a cursory look, but that place is a bit of a mess, so who knows :)

Changes to state and props not reflected in sidebar

Go to the test page, inspect it, go to react tab. Notice how the markup of the "hello world" div keeps updating as the rendered number increases. However, values shown in the sidebar do not update accordingly: state.counter in TestComponent should update as the state changes. The same is true for e.g. props.counter on InnerComponent.

Unable to click on anything inside react devtools in google chrome

React devtools version: 0.12.1
Google Chrome version: 40.0.2214.91 m

Highlight element when hovering over an element within the react tab.

Like the default Elements tab also does.

Top Level state shows last selected component state

I assume this is a bug:

Expected: for Top Level state to be empty.

Actual: Top Level state is the state of the last selected component.

React Developer Tools 0.12.1.

Not showing up when used inside an iframe

For developement I'm using webpack dev server with react-hot-loader.

With this setup, the react tab doesn't show up.
I think that's because this way, the application is displayed inside an iframe.

I tried exposing the React to global scope with both:

window.React = React;
window.top.React = React;

But it's not working with react 0.12

Note: It was working with react 0.11

Element highlighting seems not to work on test page

Not sure what's up with this but the styles are wrong on the highlight label, I don't see a highlight, and I get an empty debugging toolbar when hovering over an element on the test page. @sspi can you reproduce this?