Salut. J'ai le même problème. Peut-être que cette information sera utile:
1) Quand j'ouvre certaines "pages" (que ce soit P1 ) de mon SPA, alors j'ouvre DevTools, je ne vois pas les onglets "Composants" et "Profiler".
2) Je ferme DevTools
3) Puis je passe à l'autre "page" de SPA (soit P2 )
4) Ouvrez DevTools pendant que je suis sur P2
5) Maintenant, je vois les onglets "Composants" et "Profiler"
6) Sans fermer DevTools je repasse à P1 , les deux onglets de RDT-extension toujours là, profit :)

@ Roman-Popov Pouvez-vous reproduire cela de manière fiable? Ce que sont p1 et p2 importe-t-il? (Si quelque chose à propos des applications semble significatif, pouvez-vous les partager avec moi afin que je puisse reproduire?)

Aussi quel navigateur + OS

@ Roman-Popov @bengry (ou toute autre personne qui voit cela et peut reproduire) Si vous pouvez reproduire, seriez-vous prêt à essayer une nouvelle version de DevTools (que je pourrais partager ici) pour voir si le problème persiste?

Je pourrais essayer de faire une compilation avec # 18860 annulé. (C'est le seul commit de l'ensemble de modifications 4.6-> 4.7 qui semble même suspect à distance.)

@bvaughn À propos de p1 et p2. Oui, on dirait qu'il y a une différence entre eux. P2, où RDT n'est pas affiché par défaut, contient beaucoup plus d'éléments dom. Et voici un autre détail: l'onglet Redux-devtools se comporte exactement comme les onglets RDT.

Qu'en est-il de la page https://reactjs.org/ (problème mentionné par @bengry) - je l'ai vu aussi. Mais vérifié à nouveau maintenant et ne vois pas de problèmes. Les onglets sont affichés, tout va bien.

Probablement dans mon cas, il y a un problème de mémoire dans mon projet ou quelque chose comme ça. Parce que si je supprime de longues listes de P2, les onglets devtools apparaissent.

Chrome v83.0.4103.61
Chrome Canary v85.0.4157.0
Gagnez 10 Pro 1903

@ Roman-Popov Merci pour les informations supplémentaires!

Y a-t-il une chance que vous puissiez partager la reproduction (ou y accéder) avec moi afin que je puisse voir ce qui se passe?

Sinon, seriez-vous prêt à installer une version unique de devtools si j'en attache une ici? (Juste pour voir si tu peux encore le repro)

J'ai rencontré le même problème dans notre SPA. J'ai pu faire apparaître les onglets Composants et Profiler dans les outils de développement Chrome lorsque j'ai inspecté notre application en "vue" mobile (ce qui modifie le rendu initial des composants). J'ai rafraîchi et changé de nouveau en "vue" bureau / responsive (les outils de développement sont ouverts tout le temps) les onglets sont restés visibles.

Pour notre SPA, la plus grande différence entre la page de destination mobile et de bureau est que sur le bureau, nous rendons un tiroir ouvert avec une liste virtualisée de réaction. Ce tiroir n'est pas ouvert ou rendu immédiatement sur mobile. Je ne suis pas sûr que ces informations vous aident, je sais que ce n'est qu'un fil d'Ariane. Je mettrai à jour si je trouve autre chose.

Je serais heureux d'essayer une version personnalisée pour voir si cela résout le problème.

Parce que si je supprime de longues listes de P2, les onglets devtools apparaissent.

Oui! Réagir-virtualisé. Je l'utilise aussi pour les longues listes que j'ai mentionnées dans mon message précédent.
overscanRowCount={600} est défini pour la liste encapsulée. C'est assez grand, mais il n'y a que des espaces réservés très légers avec quelques éléments dom (pour garder le navigateur dans la liste en appuyant sur ctrl + f). Si je rétrograde overscanRowCount à + -50, le problème des onglets manquants a disparu.

Intéressant. On dirait donc que le problème a quelque chose à voir avec la taille de l'arbre, ou peut-être le nombre d'enfants dans un seul parent ... @ Roman-Popov pourriez-vous par hasard reproduire cela dans un bac à sable de code ou quelque chose? (Puisque je ne peux pas regarder directement P2, je suppose?)

Dans d'autres nouvelles cependant - overscanRowCount={600} semble ... très inopinément élevé. Je n'aurais pas conseillé que la valeur soit supérieure à un numéro à un chiffre. RV et RW existent pour éviter de générer et de travailler sur de longues listes. 600 signifie qu'il rend les lignes de la fenêtre d'affichage, plus jusqu'à 1 200 lignes supplémentaires.

Reactjs.org utilise-t-il également react-virtualized ? Parce que le problème s'est reproduit pour moi là aussi (en fait, ce problème a été ouvert avec cela comme exemple). Nous l'utilisons dans notre application, mais avec un nombre de surbalayage plus petit, et cela s'est toujours produit là-bas.

Reactjs.org utilise-t-il également react-virtualized ? Parce que le problème s'est reproduit pour moi là aussi

Fonctionne bien pour moi dans reactjs.org.

Dans notre propre application, nous n'utilisons pas de virtualisation de réaction, mais nous pouvons reproduire le problème.

edit: J'ai le même problème sur une nouvelle application de réaction créée par create-react-app.

Je pense que cela pourrait être lié à Chrome 83, j'ai commencé à avoir ce problème après la mise à niveau vers 83 et je peux le reproduire sur Chrome Canary 85.

Un collègue utilisant Chromium 81 n'a pas le problème en utilisant la même application.

@bvaughn

overscanRowCount = {600} semble ... très inopinément élevé.
....
RV et RW existent pour éviter de générer et de travailler sur de longues listes

Vrai: je connais les performances. Ce n'était pas une bonne solution, mais rapide. Plus tard, je fais une sorte de recherche personnalisée bien sûr :)
À propos du code source pour montrer mon application et essayer de la reproduire - désolé, je pense que je ne peux pas faire ça, NDA et ainsi de suite, vous savez. Mais je peux essayer de faire un petit projet CRA avec des listes react-virtualized , des pages lourdes, etc. Et partager ce dépôt si j'attrape à nouveau ce bogue. Je vais essayer de trouver du temps pour cette enquête)

Je pense que cela pourrait être lié à Chrome 83, j'ai commencé à avoir ce problème après la mise à niveau vers 83 et je peux le reproduire sur Chrome Canary 85.

Un collègue utilisant Chromium 81 n'a pas le problème en utilisant la même application.

Ce serait une information vraiment utile pour être confirmée. @ianvieira avec quelle fiabilité pouvez-vous reproduire ce problème? Si cela est très fiable, pourriez-vous essayer une version plus ancienne de Chromium et voir si elle ne se reproduit plus?

Si tel est le cas, faites-le moi savoir et je contacterai l'équipe Chrome.

Juste pour essayer une chose supplémentaire, si quelqu'un d'autre peut reproduire ce problème de manière assez fiable, essayez-vous cette extension et faites-moi savoir si cela aide?

ReactDevTools.zip

Je ne m'y attendais pas vraiment, mais j'aimerais exclure les modifications récentes de WebPack.

Pour installer l'extension ci-dessus:

1. Téléchargez-le et décompressez-le quelque part
2. Ouvrez chrome://extensions/ dans votre navigateur
3. Cliquez sur la petite bascule pour désactiver l'extension React DevTools
4. Cliquez sur le bouton "Charger unpacked"
5. Sélectionnez le dossier d'extension décompressé à partir de l'étape 1

@bvaughn Je pensais pouvoir le reproduire de manière cohérente, mais après être allé sur https://reactjs.org (qui affichait correctement les onglets) et être retourné à mon application avec la console ouverte, maintenant cela fonctionne de manière cohérente.

Sur Chrome Canary, je peux toujours le reproduire de manière cohérente sur mon application avec plusieurs nœuds. Je vais essayer la version que vous avez envoyée.

J'ai remarqué que cela semble également tuer tous mes autres onglets de console ajoutés par extension. Redux, etc.

J'ai remarqué que cela semble également tuer tous mes autres onglets de console ajoutés par extension. Redux, etc.

Je commence à soupçonner que cela a quelque chose à voir avec Chrome.

J'ai entendu des rapports d'autres personnes disant que Relay DevTools plante, ce qui provoque la rupture de React DevTools. Maintenant, je vous vois dire que cela affecte également Redux DevTools.

Il n'y a rien que React (ou Relay) devrait faire qui devrait s'influencer les uns les autres, ou l'extension Redux.

J'ai remarqué que cela semble également tuer tous mes autres onglets de console ajoutés par extension. Redux, etc.

J'ai remarqué la même chose. Je viens d'essayer dans Chrome Canary, j'ai eu le même comportement, après être allé sur https://reactjs.org les onglets React apparaissent, avec d'autres:

J'ai déjà essayé avec https: // localhost : 3000 (sans succès pour ouvrir et fermer Dev Tools) et avec https://farfetch.com. Les onglets viennent de réapparaître avec https://reactjs.org et après avoir fermé les outils de développement entre Farfetch et React et actualisé la page.

Oh btw, j'utilisais la version que vous avez envoyée @bvaughn.

Pour une raison quelconque, je ne peux voir les onglets que sur https://reactjs.org sur Canary. Localhost reste sans cela (pas seulement ceux qui réagissent, mais tous). Je suppose que j'ai l'onglet sur l'écurie parce que j'ai ouvert localhost après la documentation React avec les outils de développement ouverts.

J'ai essayé de faire de même, mais je ne peux pas l'avoir sur localhost de manière cohérente chez Chrome Canary.

EDIT: Après avoir fermé l'onglet du navigateur, j'ai accédé aux documents React sur stable, les onglets sont à nouveau manquants. Cela semble vraiment être un problème de Chrome

Cette question n'est pas déterministe. Parfois cela fonctionne, parfois non. Je ne pense pas que nous devrions trop lire dans un seul succès .

Chrome v83 est sorti un jour après React DevTools v4.7.

Voici la version précédente de React DevTools (4.6) si quelqu'un souhaite l'essayer pour voir si quelque chose change:
ReactDevTools-4.6.zip

Cela ressemble de plus en plus à un problème de Chrome d'après ce que j'entends.

Ni la version expérimentale ni la version 4.6 ne fonctionnent pour moi (seulement la solution de contournement mentionnée ci-dessus). J'ai également le sentiment qu'il s'agit d'un problème de Chrome, car le bogue est survenu après la mise à jour de Canary il y a quelques jours et persiste depuis, mais l'extension fonctionne correctement dans Stable.

Il peut également être intéressant de noter que reactjs.org a toujours eu des problèmes nouveau . Ce qui semble nouveau, c'est la fréquence de cet échec, le fait que cela se produit pour d'autres sites, et le fait que cela semble également se produire pour d'autres extensions. (C'est pourquoi je pense que c'est un problème Chrome / Chrome)

Je n'ai aucune idée du fonctionnement de l'extension et je ne suis pas non plus en mesure de créer un cas de test réduit. Mais peut-être que cela vous aide de quelque manière que ce soit:

Sur reactjs.org où l'extension fonctionne, l'objet window a __REACT_DEVTOOLS_COMPONENT_FILTERS__ , __REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ et __REACT_DEVTOOLS_GLOBAL_HOOK__ .

Ce dernier ressemble à ceci:

Sur l'application où l'extension ne fonctionne pas, seul __REACT_DEVTOOLS_GLOBAL_HOOK__ existe et ressemble à ceci:

Existe-t-il un moyen de se connecter à l'extension ( main.js ?), Peut-être même d'attacher un débogueur, pour trouver une erreur potentielle? (J'ai essayé background.js mais cela ne semble pas être le bon endroit à regarder.)

@bvaughn Je pense également que cela peut être un bogue de Chromium (notez Chromium, et non Chrome, puisque j'obtiens exactement le même comportement de bogue dans Edge). Opera fonctionne très bien pour moi avec le RDT le plus récent, donc je suppose qu'ils n'ont pas encore mis à jour vers Chromium 83 (bien que je ne sois pas près d'un calcul pour le moment).

J'ai ouvert le bogue ici car il semble être transmis au RDT (je ne savais pas non plus que d'autres comme Relay et Redux DT ne fonctionnaient pas), donc cela pourrait être avec une certaine intégration entre les deux. Peut-être une API d'extension qui cause le problème et qui a été modifiée dans Chromium 83.

Avez-vous contacté l'équipe Chromium / Chrome à ce sujet comme vous l'avez mentionné précédemment?

Nous avons convenu à ce stade qu'il semble probable qu'il s'agisse d'un bogue Chromium (qui s'est déployé avec les récentes mises à jour de Chrome 83 et Edge 83)

J'ai envoyé un ping à l'un des développeurs sur Twitter, mais je n'ai pas encore eu de réponse.

Existe-t-il un moyen de se connecter à l'extension (main.js?), Peut-être même d'attacher un débogueur, pour trouver une erreur potentielle? (J'ai essayé background.js mais cela ne semble pas être le bon endroit pour regarder.)

@maxbeier Il existe plusieurs façons de déboguer les extensions. Certaines extensions injectent du code dans la page que vous visualisez (comme le fait React DevTools), auquel cas vous pouvez simplement le déboguer en utilisant le flux de travail normal.

Vous pouvez également déboguer l'interface utilisateur de l'extension elle-même, ce que vous pouvez faire en détachant / désancrant le panneau DevTools et en ouvrant une deuxième fenêtre DevTools pour inspecter la première, comme ceci (j'utilise ⌘ + J ):

Vous pouvez également ouvrir l'extension (chrome: // extensions /? Id = aogeonfmjfclepddhjhilmncnhooehhl) et choisir "Détails" et "Inspecter les vues".

En passant, cela semble être un problème de chrome qui affecte également Vue et Redux DevTools.

Si vous avez un compte de bogue CR, pensez à mettre ce problème en vedette:
https://bugs.chromium.org/p/chromium/issues/detail?id=1085215

Je ne sais pas si c'est la réponse que vous recherchez, mais dans Urql Devtools, nous avons essayé de ne plus utiliser chrome.devtools.inspectedWindow.eval en faveur de la négociation en raison d'une imprévisibilité comme celle-ci.

Le problème avec l'évaluation d'une fenêtre inspectée est que vous pouvez vous retrouver avec des conditions de concurrence ou une dépendance à l'interrogation, comme dans le cas de react devtools.

const loadCheckInterval = setInterval(function() {
  createPanelIfReactLoaded();
}, 1000);

Je n'ai pas été en mesure de reproduire le bogue mais je ne serais pas surpris si Chrome fait quelque chose de funky avec des appels d'intervalle dans les extensions. Ce n'est pas amusant, mais la poignée de main peut rendre les choses un peu plus simples, je sais que la messagerie est quelque chose que la documentation Chrome encourage lors des évaluations de fenêtres pour des raisons de sécurité.

C'est une suggestion intéressante, @andyrichardson. Je vous remercie!

Nous sommes également confrontés au même problème pour ChroPath
Je n'ai pas encore obtenu de solution permanente mais voici le travail autour de-

1. Changez le thème Chrome DevTools, seulement une fois qu'il est requis.
2. Maintenant, ouvrez devtools, vous trouvez l'onglet d'extension dans DevTools.
3. Vous pouvez à nouveau changer de thème ce que vous voulez conserver et cela résoudra votre problème.

Merci, @sanjayautonomiq , ce travail pour moi

Cela se produit pour moi depuis plus d'un an dans Chrome. généralement en rechargeant la page, les composants et l'onglet du profileur réapparaissent. Je voulais juste souligner que ce n'est pas seulement la dernière version, cela se produit depuis la v16 aussi longtemps que je me souvienne

Cela se produit pour moi depuis plus d'un an dans Chrome. généralement en rechargeant la page, les composants et l'onglet du profileur réapparaissent. Je voulais juste souligner que ce n'est pas seulement la dernière version, cela se produit depuis la v16 aussi longtemps que je me souvienne

Je pense que c'est peut-être quelque chose de votre part alors, car personnellement, je n'ai pas vu cela l'année dernière AFAIR - et comme mentionné, cela ne se produit pas dans le dernier Opera au moment d'écrire ceci (Opera 68, Chromium 81), et pour moi, rafraîchir la page n'aide pas. La solution de contournement suggérée par @sanjayautonomiq le fait cependant.
Même si ce bogue existe depuis au moins un an, quelque chose au cours des dernières semaines l'a aggravé (nouveau Chromium et / ou nouvelles versions de RDT) - comme en témoignent toutes les réactions de ce numéro.

Même si ce bogue existe depuis au moins un an, quelque chose au cours des dernières semaines l'a aggravé (nouveau Chromium et / ou nouvelles versions de RDT) - comme en témoignent toutes les réactions de ce numéro.

Certainement vrai. J'ai à nouveau envoyé un ping au bogue CR. Cette régression est assez perturbatrice.

FYI, je viens de signaler http://crbug.com/1085215 comme un double de http://crbug.com/1093731. Un correctif pour ce dernier problème a été soumis il y a environ 8 jours. Veuillez réessayer dans Canary et, si le problème n'est pas résolu, dédupliquez 1085215.

On dirait en effet que le correctif Canary résout ce problème (ou du moins le rend BEAUCOUP plus difficile à reproduire). Nous allons laisser ce problème ouvert jusqu'à ce que le correctif soit passé à Chrome stable, car nous recevons déjà beaucoup de rapports en double à ce sujet.

Nous sommes également confrontés au même problème pour ChroPath
Je n'ai pas encore obtenu de solution permanente mais voici le travail autour de-

1. Changez le thème Chrome DevTools, seulement une fois qu'il est requis.
2. Maintenant, ouvrez devtools, vous trouvez l'onglet d'extension dans DevTools.
3. Vous pouvez à nouveau changer de thème ce que vous voulez conserver et cela résoudra votre problème.

A travaillé comme un charme pour moi, merci! J'étais sur le point d'essayer de me cogner la tête contre le mur.

Cela est tellement bizarre.

Je dois changer le thème devTools pour résoudre ce problème.

Merci, @sanjayautonomiq

Mais c'est un bug.

Mais c'est un bug.

Oui.

Plus précisément, il s'agit d'un bogue Chrome (bogue CR 1085215 ) comme mentionné dans la description du problème: smile: Rien que nous pouvons faire (ici) pour le corriger.

Cela semble être résolu maintenant pour moi dans Chrome stable, je vais donc fermer ce problème.

Cela semble être résolu maintenant pour moi dans Chrome stable, je vais donc fermer ce problème.

Se reproduit toujours pour moi sur Chrome 83.0.4103.116.

Je conviens que cela n'a pas de solution du côté RDT, mais cela pourrait valoir la peine de garder ce problème ouvert jusqu'à ce que cela soit résolu dans Chrome.

Même problème ici Version 83.0.4103.116 (version officielle) (64 bits)

Je vais intervenir et dire que c'est aussi un problème pour moi (version 83.0.4103.116).

Salut les gens. Cela ne vaut probablement pas la peine d'ajouter plus de commentaires "+1" ici car il s'agit d'un bogue de Chromium. Je ne peux rien y faire du côté de l'extension pour le faire fonctionner. Les votes «+1» seraient mieux dépensés sur le bogue Chromium lui-même: sourire: pour que Google sache que cela affecte beaucoup de gens.

Cela étant dit, le bogue CR a été marqué comme corrigé et devrait être intégré à la v84 de Chrome selon ce commentaire , il devrait donc être résolu bientôt pour tout le monde, espérons-le.

En attendant, je vais verrouiller ce problème juste pour éviter d'envoyer des notifications de spam à tous ceux qui ont déjà commenté ci-dessus.