React-devtools: React tab in Chrome devtools does not get persisted

[joshua-tj]

Version: 2.5.2
Chrome version: 62.0.3202.62
Mac OSX: 10.12.6

Steps

1. Open dev tools and move the React tab next to Elements (position 2)
2. Close tab
3. Open new tab and navigate to React app
4. Open dev tools

Expected
React tab is at position 2

Actual
React tab is hidden in the additional tabs dropdown

I can provide a video if necessary. I also have the redux-devtools which persists its position just fine.

[kyleramirez]

Same thing for me, React tab is sent to the end every single time you open a new tab

[stolinski]

Same here for me on both Chrome and Chrome Canary (64.0.3256.0)

[philraj]

Same for me on Chrome 62.0.3202.75, but this happens for Redux and Backbone dev tools as well. Probably an issue with Chrome and not with React dev tools specifically.

https://bugs.chromium.org/p/chromium/issues/detail?id=771144

[MatisLepik]

This would need some further testing, but I believe the bug is caused by the way that the panel is loaded conditionally, only if the site is using React: https://github.com/facebook/react-devtools/blob/master/shells/webextension/src/main.js#L30

Because the tab is added asynchronously after everything else, it always gets appended to the end of the list.

I tried removing all the conditional logic and just keeping lines 30 - 45, and it seemed to fix the issue. It might be good to add an option to always show the React tab, even if the website isn't using React.

[philraj]

There's some kind of interaction occurring when you have multiple third-party dev tools extensions. If I disable React dev tools, Chrome can remember the position of Backbone dev tools, but not the position of Redux dev tools.

If I then disable Backbone dev tools, Chrome remembers the position of Redux dev tools properly. Also, if React dev tools is the only third-party dev tools extension I have enabled, its position is remembered correctly.

Possibly something to do with extension load order?

[edit] I left a comment on the relevant issue on the Chrome dev tools issue tracker which says as much. I don't think this is react-devtools' fault. Worth investigating if @MatisLepik's suggested change would serve as a workaround until the Chrome dev tools team pushes a fix for this problem.

[olee]

Anything happening here?
This issue is super annoying to always need to go to the end of the list (because there are soo many tabs react got hidden) and move it to the front.
For now I also just modified the extension locally to always load itself instead of checking for react on the page first.

[malyzeli]

@MatisLepik I tried what you suggest but unfortunately it didn't work for me. Can you please provide fork with that workaround?

[addyosmani]

When testing this out with the latest stable React DevTools in Canary (Chrome 73), I can't reproduce this behavior. Perhaps I'm testing this wrong?

1. Install React DevTools
2. Navigate to an app using React
3. Open DevTools. Change the position of React tab to something else (e.g position 2, after Elements)
4. Close DevTools. Open them again on the current tab (or any other tab)
5. Observe that after a brief flash, React DevTools is now in position 2

This appears to align with a fix in mid December https://bugs.chromium.org/p/chromium/issues/detail?id=771144

[bvaughn]

Addy beat me here 😁 Thanks!

[jimmybrawn]

https://i.gyazo.com/ae1beb98d847489b98010273cfc2a2ff.mp4

Open dev tools
Move React to position 2
Close dev tools and reopen again.
React is still on last position

Chrome version: 72.0.3626.81
React Dev tool: 3.6.0

[stephaniie2]

People wanted it. They fixed it. Then removed it in next update.

``??? 🥇

[bvaughn]

React DevTools has been rewritten and recently launched a new version 4 UI. The source code for this rewrite was done in a separate repository and now lives in the main React repo (github.com/facebook/react).

Because version 4 was a total rewrite, and all issues in this repository are related to the old version 3 of the extension, I am closing all issues in this repository. If you can still reproduce this issue, or believe this feature request is still relevant, please open a new issue in the React repo: https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools