New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Include DevTools as Public API #4593

Open
sebmarkbage opened this Issue Aug 10, 2015 · 4 comments

Comments

Projects
None yet
5 participants
@sebmarkbage
Member

sebmarkbage commented Aug 10, 2015

The idea is to have a multi-version extension that allow you to attach a "debugger" to a running React instance. This debugger protocol injects intercepted functions into a particular version of React which exposes development hooks.

Effectively this: https://github.com/facebook/react-devtools/tree/devtools-next/backend/integration

This is not intended to expose stateful reflection APIs in production use since it will negatively affect performance.

@gre

This comment has been minimized.

Show comment
Hide comment
@gre

gre Oct 8, 2015

Contributor

+1 this is really interesting. I'm currently developing a tool that intends to be a react devtools extension so I would love to have this possible.

Any WIP on this? Maybe I can help. However I don't have a good knowledge of the React source code and where to start looking at.

Contributor

gre commented Oct 8, 2015

+1 this is really interesting. I'm currently developing a tool that intends to be a react devtools extension so I would love to have this possible.

Any WIP on this? Maybe I can help. However I don't have a good knowledge of the React source code and where to start looking at.

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Oct 8, 2015

Member

I'm very interested in this.

With the advent of stateless components there's no easy way for my library to get internal instance of the root component to traverse the tree and force update it.

The important part for me is that multiple tools should be able to hook up to this API. Both DevTools and my library should be able to register independently without interfering with each other.

Would you like me to propose a straw man API based on what DevTools uses now?

Member

gaearon commented Oct 8, 2015

I'm very interested in this.

With the advent of stateless components there's no easy way for my library to get internal instance of the root component to traverse the tree and force update it.

The important part for me is that multiple tools should be able to hook up to this API. Both DevTools and my library should be able to register independently without interfering with each other.

Would you like me to propose a straw man API based on what DevTools uses now?

@sebmarkbage

This comment has been minimized.

Show comment
Hide comment
@sebmarkbage

sebmarkbage Oct 8, 2015

Member

Yes please. The new devtools was designed with this in mind.

We would like to move the integration part into React's core and expose that API.

https://github.com/facebook/react-devtools/tree/master/backend/integration

The key to this design is that React should not need to maintain any state itself. Other than the component state. The API could force a complete rerender to get a replay of changes but the API should not require React keeping the previous render in memory.

On Oct 8, 2015, at 2:35 PM, Dan Abramov notifications@github.com wrote:

I'm very interested in this.

With the advent of stateless components there's no easy way for my library to get internal instance of the root component to traverse the tree and force update it.

The important part for me is that multiple tools should be able to hook up to this API. Both DevTools and my library should be able to register independently without interfering with each other.

Would you like me to propose a straw man API based on what DevTools uses now?


Reply to this email directly or view it on GitHub.

Member

sebmarkbage commented Oct 8, 2015

Yes please. The new devtools was designed with this in mind.

We would like to move the integration part into React's core and expose that API.

https://github.com/facebook/react-devtools/tree/master/backend/integration

The key to this design is that React should not need to maintain any state itself. Other than the component state. The API could force a complete rerender to get a replay of changes but the API should not require React keeping the previous render in memory.

On Oct 8, 2015, at 2:35 PM, Dan Abramov notifications@github.com wrote:

I'm very interested in this.

With the advent of stateless components there's no easy way for my library to get internal instance of the root component to traverse the tree and force update it.

The important part for me is that multiple tools should be able to hook up to this API. Both DevTools and my library should be able to register independently without interfering with each other.

Would you like me to propose a straw man API based on what DevTools uses now?


Reply to this email directly or view it on GitHub.

@kentcdodds

This comment has been minimized.

Show comment
Hide comment
@kentcdodds

kentcdodds Nov 13, 2015

Contributor

I'm not certain whether this can be done in a way that doesn't impact performance, but I thought I'd mention this for what it's worth. It'd be really nice to be able to debug a production react application. Angular does this by setting window.name to something and refreshing the browser. Angular then keys off of this to add the necessary debug information. If there's a way to do something similar without impacting performance for a "non-debug" mode that would be cool. My 2¢

Contributor

kentcdodds commented Nov 13, 2015

I'm not certain whether this can be done in a way that doesn't impact performance, but I thought I'd mention this for what it's worth. It'd be really nice to be able to debug a production react application. Angular does this by setting window.name to something and refreshing the browser. Angular then keys off of this to add the necessary debug information. If there's a way to do something similar without impacting performance for a "non-debug" mode that would be cool. My 2¢

dliv added a commit to dliv/react-detector that referenced this issue Jan 15, 2016

Update detection to partially work for React v0.15
Partial fix for Issue 7 - kentcdodds#7

Only the root element will be highlighted in React v0.15. Complete solution probably
requires React DevTools: facebook/react#4593
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment