facebook / react-devtools Goto Github PK
View Code? Open in Web Editor NEWAn extension that allows inspection of React component hierarchy in the Chrome and Firefox Developer Tools.
License: Other
An extension that allows inspection of React component hierarchy in the Chrome and Firefox Developer Tools.
License: Other
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:
Let me know what you think :-).
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.
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?
ex: Deleting a node or changing attributes of a node not seem to be reflected in reacts tab.
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.
If possible, the style information for each node like the DOM inspector, with the ability to edit in place.
I haven't figured out how to reproduce this reliably, but it happens several times a week. Refreshing the page fixes it.
Symptoms:
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?).
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)
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>;
could be helpful if context menu in react tab provides shortcuts to
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.
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.
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.
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:
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.
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.
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 :)
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:
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.
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.
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
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.
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.
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.
Using Chrome Canary, the sidebar is gone. Might be a breaking change coming or just a temporary bug in Canary.
React devtools version: 0.12.1
Google Chrome version: 40.0.2214.91 m
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!
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
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.
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.
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.
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 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.
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.
Would be nice to have component available for tinkering in console when selected - so that I could inspect its props and state using code.
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?
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.
A couple of Play Store reviewers also mention Chrome 40
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.
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.
Like the default Elements tab also does.
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?
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
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>
);
}
});
Would be nice to just show the CSSTransitionGroup wrapper.
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
.
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 atwindow.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).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.