Hallo. Ich habe das gleiche Problem. Vielleicht sind diese Informationen hilfreich:
1) Wenn ich einige "Seiten" (sei es P1 ) meines SPA öffne und dann DevTools öffne, werden die Registerkarten "Komponenten" und "Profiler" nicht angezeigt.
2) Ich schließe DevTools
3) Dann wechsle ich zur anderen "Seite" von SPA (sei es P2 )
4) Öffnen Sie DevTools, während ich auf P2 bin
5) Jetzt sehe ich die Registerkarten "Komponenten" und "Profiler"
6) Ohne DevTools zu schließen, wechsle ich zurück zu P1 , die beiden Registerkarten der RDT-Erweiterung sind immer noch hier, Gewinn :)

@ Roman-Popov Kannst du das zuverlässig reproduzieren? Ist es wichtig, was p1 und p2 sind? (Wenn etwas an den Apps von Bedeutung zu sein scheint, können Sie sie mir irgendwie mitteilen, damit ich sie wiedergeben kann?)

Auch welcher Browser + Betriebssystem

@ Roman-Popov @bengry (oder jemand anderes, der dies sieht und Repro kann) Wenn Sie Repro können, wären Sie bereit, einen neuen Build von DevTools (den ich hier teilen könnte) auszuprobieren, um zu sehen, ob das Problem weiterhin auftritt?

Ich könnte versuchen, einen Build mit # 18860 zu erstellen. (Dies ist das einzige Commit im Änderungssatz 4.6-> 4.7, das sogar aus der Ferne verdächtig aussieht.)

@bvaughn Über p1 und p2. Ja, es sieht so aus, als gäbe es einen Unterschied zwischen ihnen. P2, wo RDT standardmäßig nicht angezeigt wird, enthält viel mehr Dom-Elemente. Und hier noch ein Detail: Die Registerkarte Redux-devtools verhält sich genau wie die Registerkarte RDT.

Was ist mit der https://reactjs.org/ Seite (Problem von @bengry erwähnt) - das habe ich auch gesehen. Aber überprüfe es jetzt noch einmal und sehe keine Probleme. Tabs werden angezeigt, alles ist in Ordnung.

Wahrscheinlich gibt es in meinem Fall ein Speicherproblem in meinem Projekt oder ähnliches. Denn wenn ich lange Listen aus P2 entferne, werden devtools-Registerkarten angezeigt.

Chrome v83.0.4103.61
Chrome Canary v85.0.4157.0
Gewinnen Sie 10 Pro 1903

@ Roman-Popov Danke für die zusätzlichen Informationen!

Gibt es eine Chance, dass Sie den Repro (oder den Zugriff darauf) mit mir teilen, damit ich sehen kann, was los ist?

Würdest du alternativ bereit sein, einen einmaligen devtools-Build zu installieren, wenn ich hier einen anhänge? (Nur um zu sehen, ob du damit noch Repro machen kannst)

Ich habe das gleiche Problem in unserem SPA festgestellt. Ich konnte die Registerkarten "Komponenten" und "Profiler" in den Chrome Dev Tools anzeigen lassen, als ich unsere App in der mobilen "Ansicht" inspizierte (wodurch sich das ursprüngliche Rendern der Komponenten ändert). Ich habe aktualisiert und bin zurück zu Desktop / Responsive "Ansicht" gewechselt (Entwickler-Tools sind die ganze Zeit geöffnet). Die Registerkarten blieben sichtbar.

Für unser SPA besteht der größte Unterschied zwischen der Zielseite für Mobilgeräte und Desktops darin, dass auf dem Desktop eine Schublade mit einer reaktionsvirtualisierten Liste geöffnet wird. Diese Schublade ist nicht geöffnet oder wird sofort auf dem Handy gerendert. Ich bin mir nicht sicher, ob diese Informationen helfen. Ich weiß, dass es nur ein Brotkrumen ist. Ich werde aktualisieren, wenn ich etwas anderes finde.

Ich würde gerne einen benutzerdefinierten Build ausprobieren, um festzustellen, ob das Problem dadurch behoben wird.

Denn wenn ich lange Listen aus P2 entferne, werden devtools-Registerkarten angezeigt.

Ja! Reagieren Sie virtualisiert. Ich benutze das auch für lange Listen, die ich in meiner vorherigen Nachricht erwähnt habe.
overscanRowCount={600} ist für die umschlossene Liste festgelegt. Es ist groß genug, aber es gibt nur sehr leichte Platzhalter mit einigen Dom-Elementen (um die Browsersuche durch Drücken von Strg + F durch die Liste zu führen). Wenn ich overscanRowCount auf + -50 herabstufte, ist das Problem mit fehlenden Tabs weg.

Interessant. Es hört sich also so an, als hätte das Problem etwas mit der Größe des Baums oder vielleicht mit der Anzahl der Kinder in einem Alleinerziehenden zu tun ... @ Roman-Popov Könnten Sie dies zufällig in einer Code-Sandbox oder so etwas wiedergeben? (Da ich P2 nicht direkt ansehen kann, nehme ich an?)

In anderen Nachrichten scheint overscanRowCount={600} ... sehr unerwartet hoch zu sein. Ich hätte nicht empfohlen, dass dieser Wert über einer einstelligen Zahl liegt. RV und RW existieren, um zu dass lange Listen erstellt und bearbeitet werden. 600 bedeutet, dass die Ansichtsfensterzeilen gerendert werden, plus bis zu 1.200 zusätzliche.

Verwendet reactjs.org auch react-virtualized ? Weil die Ausgabe auch dort für mich reproduziert wurde (tatsächlich wurde diese Ausgabe mit dem als Beispiel eröffnet). Wir verwenden es in unserer App, aber mit einer geringeren Anzahl von Overscans, und es ist immer noch dort passiert.

Verwendet reactjs.org auch react-virtualized ? Weil das Thema auch dort für mich reproduziert wurde

Funktioniert gut für mich in reactjs.org.

In unserer eigenen App verwenden wir nicht reaktionsvirtualisiert, können das Problem jedoch reproduzieren.

Bearbeiten: Ich habe das gleiche Problem mit einer neuen React-App, die von der Create-React-App erstellt wurde.

Ich denke, dies könnte mit Chrome 83 zusammenhängen. Nach dem Upgrade auf 83 trat dieses Problem auf und ich kann es auf Chrome Canary 85 reproduzieren.

Ein Kollege, der Chromium 81 verwendet, hat nicht das Problem, dieselbe App zu verwenden.

@bvaughn

overscanRowCount = {600} scheint ... sehr unerwartet hoch zu sein.
....
RV und RW existieren, um zu vermeiden, dass lange Listen erstellt und bearbeitet werden

Richtig: Ich weiß über Leistung Bescheid. Das war keine gute, aber schnelle Lösung. Später mache ich natürlich eine Art benutzerdefinierte Suche :)
Über den Quellcode, um meine App anzuzeigen und zu reproduzieren - Entschuldigung, ich glaube, ich kann das nicht, NDA und so weiter, wissen Sie. Aber ich kann versuchen, ein kleines CRA-Projekt mit react-virtualized Listen, schweren Seiten usw. zu erstellen. Und dieses Repo zu teilen, wenn ich diesen Fehler erneut bekomme. Ich werde versuchen, etwas Zeit für diese Untersuchung zu finden.

Ich denke, dies könnte mit Chrome 83 zusammenhängen. Nach dem Upgrade auf 83 trat dieses Problem auf und ich kann es auf Chrome Canary 85 reproduzieren.

Ein Kollege, der Chromium 81 verwendet, hat nicht das Problem, dieselbe App zu verwenden.

Dies wäre wirklich eine nützliche Information, um bestätigt zu werden. @ianvieira Wie zuverlässig können Sie dieses Problem reproduzieren? Wenn sehr zuverlässig, können Sie eine ältere Chromium-Version ausprobieren und feststellen, ob sie nicht mehr reproduziert werden kann?

Wenn ja, lassen Sie es mich wissen und ich werde mich an das Chrome-Team wenden.

Um eine zusätzliche Sache zu versuchen: Wenn jemand anderes dieses Problem ziemlich zuverlässig nachweisen kann, würden Sie diese Erweiterungsversion ausprobieren und mich wissen lassen, ob sie hilft?

ReactDevTools.zip

Ich erwarte es nicht wirklich, möchte aber die jüngsten Änderungen an WebPack ausschließen.

So installieren Sie die obige Erweiterung:

1. Laden Sie es herunter und entpacken Sie es irgendwo
2. Öffnen Sie chrome://extensions/ in Ihrem Browser
3. Klicken Sie auf den kleinen Schalter, um die React DevTools-Erweiterung zu deaktivieren
4. Klicken Sie auf die Schaltfläche "Load Unpacked"
5. Wählen Sie den entpackten Erweiterungsordner aus Schritt 1 aus

@bvaughn Ich dachte, ich könnte es konsistent reproduzieren, aber nachdem ich zu https://reactjs.org gegangen bin (wo die Registerkarten korrekt angezeigt wurden) und mit geöffneter Konsole zu meiner Anwendung zurückgekehrt bin, funktioniert es jetzt konsistent.

Auf Chrome Canary kann ich es immer noch konsistent auf meiner App mit mehreren Knoten reproduzieren. Ich werde die Version ausprobieren, die Sie gesendet haben.

Mir ist aufgefallen, dass dies anscheinend auch alle anderen Konsolenregisterkarten mit Erweiterungen zerstört. Redux usw.

Mir ist aufgefallen, dass dies anscheinend auch alle anderen Konsolenregisterkarten mit Erweiterungen zerstört. Redux usw.

Ich fange an zu vermuten, dass dies etwas mit Chrome zu tun hat.

Ich habe Berichte von anderen gehört, die besagen, dass Relay DevTools abstürzt, was dazu führt, dass React DevTools kaputt geht. Jetzt sehen Sie, dass dies auch Redux DevTools betrifft.

Es gibt nichts, was React (oder Relay) tun sollte, was sich gegenseitig oder die Redux-Erweiterung beeinflussen könnte.

Mir ist aufgefallen, dass dies anscheinend auch alle anderen Konsolenregisterkarten mit Erweiterungen zerstört. Redux usw.

Mir ist das auch aufgefallen. Ich habe es gerade in Chrome Canary versucht. Ich hatte das gleiche Verhalten. Nachdem ich zu https://reactjs.org gegangen bin, werden die Registerkarten "Reagieren" zusammen mit anderen angezeigt:

Ich habe es zuvor mit https: // localhost : 3000 (ohne Erfolg beim Öffnen und Schließen von Dev Tools) und mit https://farfetch.com versucht https://reactjs.org und nach dem Schließen der Entwicklungswerkzeuge zwischen Farfetch und React und dem Aktualisieren der Seite wieder angezeigt.

Übrigens habe ich die Version verwendet, die Sie @bvaughn gesendet haben.

Aus irgendeinem Grund kann ich die Registerkarten nur unter https://reactjs.org auf Canary sehen. Localhost-Stills ohne sie (nicht nur die reagierenden, sondern alle). Ich vermute, ich habe die Registerkarte im Stall, weil ich localhost nach React docs mit geöffneten Dev-Tools geöffnet habe.

Ich habe versucht, dasselbe zu tun, aber ich kann es auf Chromehary nicht konsistent auf localhost haben.

BEARBEITEN: Nach dem Schließen der Browser-Registerkarte habe ich auf React docs on stabil zugegriffen. Die Registerkarten fehlen wieder. Es scheint wirklich ein Chrome-Problem zu sein

Dieses Problem ist nicht deterministisch. Manchmal funktioniert es, manchmal nicht. Ich denke nicht, dass wir zu viel in einen einzigen Erfolg hineinlesen sollten.

Chrome v83 wurde einen Tag nach React DevTools v4.7 veröffentlicht.

Hier ist die vorherige Version von React DevTools (4.6), wenn jemand sie ausprobieren möchte, um festzustellen, ob sich etwas ändert:
ReactDevTools-4.6.zip

Nach allem, was ich höre, klingt es immer mehr nach einem Chrome-Problem.

Weder die experimentelle Version noch 4.6 funktionieren für mich (nur die oben erwähnte Problemumgehung). Ich habe auch das Gefühl, dass dies ein Chrome-Problem ist, da der Fehler nach der Aktualisierung von Canary vor einigen Tagen aufgetreten ist und seitdem weiterhin besteht, aber die Erweiterung in Stable ordnungsgemäß funktioniert.

Es kann auch erwähnenswert sein, dass reactjs.org immer gelegentlich Probleme mit der nicht angezeigten Erweiterungsregisterkarte hatte. Ich bin mir nicht sicher warum, aber ein gelegentlicher Fehler gibt es nichts Neues . Was neu zu sein scheint, ist die Häufigkeit dieses Fehlers und die Tatsache, dass er für andere Sites auftritt, und die Tatsache, dass er auch für andere Erweiterungen auftritt. (Aus diesem Grund denke ich, dass es sich um ein Chrome / Chromium-Problem handelt.)

Ich habe keine Ahnung, wie die Erweiterung funktioniert, und ich kann auch keinen reduzierten Testfall erstellen. Aber vielleicht hilft dir das irgendwie:

Auf reactjs.org, wo die Erweiterung funktioniert, hat das Objekt window __REACT_DEVTOOLS_COMPONENT_FILTERS__ , __REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ und __REACT_DEVTOOLS_GLOBAL_HOOK__ .

Letzteres sieht so aus:

In der App, in der die Erweiterung nicht funktioniert, ist nur __REACT_DEVTOOLS_GLOBAL_HOOK__ vorhanden und sieht folgendermaßen aus:

Gibt es eine Möglichkeit, sich in die Erweiterung einzuhängen ( main.js ?), Vielleicht sogar einen Debugger anzuhängen, um einen möglichen Fehler zu finden? (Ich habe background.js ausprobiert, aber dies scheint nicht der richtige Ort zu sein.)

@bvaughn Ich denke auch, dass dies ein Chromium-Fehler sein könnte (beachten Sie Chromium und nicht Chrome, da ich in Edge genau das gleiche Buggy-Verhalten bekomme). Opera funktioniert für mich mit dem neuesten RDT einwandfrei, daher haben sie vermutlich noch nicht auf Chromium 83 aktualisiert (obwohl ich momentan nicht in der Nähe eines zu überprüfenden Computers bin).

Ich habe den Fehler hier geöffnet, da er anscheinend an das RDT weitergeleitet wird (ich wusste auch nicht, dass andere wie Relay und Redux DT nicht funktionieren), so dass es möglicherweise zu einer gewissen Integration zwischen beiden kommt. Möglicherweise eine Erweiterungs-API, die das Problem verursacht und in Chromium 83 geändert hat.

Haben Sie diesbezüglich das Chromium / Chrome-Team kontaktiert, wie Sie bereits erwähnt haben?

An dieser Stelle war man sich einig, dass es sich wahrscheinlich um einen Chromium-Fehler handelt (der mit den jüngsten Chrome 83- und Edge 83-Updates eingeführt wurde).

Ich habe einen der Entwickler auf Twitter angerufen, aber noch nichts davon gehört.

Gibt es eine Möglichkeit, sich in die Erweiterung (main.js?) Einzuhängen, vielleicht sogar einen Debugger anzuhängen, um einen möglichen Fehler zu finden? (Ich habe background.js ausprobiert, aber dies scheint nicht der richtige Ort zu sein.)

@maxbeier Es gibt verschiedene Möglichkeiten, Erweiterungen zu debuggen. Einige Erweiterungen fügen Code in die angezeigte Seite ein (wie auch React DevTools). In diesem Fall können Sie ihn einfach mit dem normalen Workflow debuggen.

Möglicherweise möchten Sie auch die Benutzeroberfläche der Erweiterung selbst debuggen. Dies können Sie tun, indem Sie das DevTools-Bedienfeld trennen / abdocken und ein zweites DevTools-Fenster öffnen, um das erste Fenster wie folgt zu überprüfen (ich verwende ⌘ + J ):

Sie können auch die Erweiterung öffnen (chrome: // extensions /? Id = aogeonfmjfclepddhjhilmncnhooehhl) und "Details" und "Ansichten überprüfen" auswählen.

Übrigens scheint dies ein Chromium-Problem zu sein, das sich auch auf Vue und Redux DevTools auswirkt.

Wenn Sie ein CR-Fehlerkonto haben, sollten Sie dieses Problem in den Vordergrund stellen:
https://bugs.chromium.org/p/chromium/issues/detail?id=1085215

Ich bin mir nicht sicher, ob dies die Antwort ist, nach der Sie suchen, aber in Urql Devtools haben wir versucht, die Verwendung von chrome.devtools.inspectedWindow.eval zugunsten des Händeschüttelns zu vermeiden, da dies unvorhersehbar ist.

Das Problem bei der Auswertung eines inspizierten Fensters besteht darin, dass Sie möglicherweise Rennbedingungen oder eine Abhängigkeit von der Abfrage haben, wie dies bei React Devtools der Fall ist.

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

Ich konnte den Fehler nicht reproduzieren, aber ich wäre nicht überrascht, wenn Chrome mit Intervallaufrufen in Erweiterungen etwas Funky macht. Es macht keinen Spaß, aber Handshake könnte die Dinge ein wenig einfacher machen. Ich weiß, dass Messaging aus Sicherheitsgründen etwas ist, das die Chrome-Dokumente über Fensterbewertungen ermutigen.

Das ist ein interessanter Vorschlag, @andyrichardson. Vielen Dank!

Das gleiche Problem haben wir auch für ChroPath
Ich habe noch keine dauerhafte Lösung erhalten, aber hier ist die Arbeit um -

1. Ändern Sie das Chrome DevTools-Design nur, wenn es erforderlich ist.
2. Öffnen Sie nun devtools und Sie finden die Erweiterungsregisterkarte in DevTools.
3. Sie können das Thema erneut ändern, was auch immer Sie behalten möchten, und dies wird Ihr Problem beheben.

Danke, @sanjayautonomiq , diese Arbeit für mich

Das passiert für mich seit über einem Jahr in Chrom. Beim erneuten Laden der Seite werden die Komponenten und die Registerkarte "Profiler" erneut angezeigt. Ich wollte nur darauf hinweisen, dass es nicht nur die neueste Version ist, sondern seit v16, solange ich mich erinnern kann

Das passiert für mich seit über einem Jahr in Chrom. Beim erneuten Laden der Seite werden die Komponenten und die Registerkarte "Profiler" erneut angezeigt. Ich wollte nur darauf hinweisen, dass es nicht nur die neueste Version ist, sondern seit v16, solange ich mich erinnern kann

Ich denke, das könnte etwas für Sie sein, da ich dies persönlich im letzten Jahr AFAIR nicht gesehen habe - und wie bereits erwähnt, geschieht dies zum Zeitpunkt des Schreibens in der neuesten Oper nicht (Opera 68, Chromium 81). und für mich hilft es nicht, die Seite zu aktualisieren. Die von @sanjayautonomiq vorgeschlagene
Selbst wenn dieser Fehler seit mindestens einem Jahr besteht, hat ihn etwas in den letzten Wochen verschlimmert (neue Chromium- und / oder neue RDT-Versionen) - wie aus allen Reaktionen in dieser Ausgabe hervorgeht.

Selbst wenn dieser Fehler seit mindestens einem Jahr besteht, hat ihn etwas in den letzten Wochen verschlimmert (neue Chromium- und / oder neue RDT-Versionen) - wie aus allen Reaktionen in dieser Ausgabe hervorgeht.

Sicherlich wahr. Ich habe den CR-Fehler erneut gepingt. Diese Regression ist ziemlich störend.

Zu Ihrer Information, ich habe gerade http://crbug.com/1085215 als Duplikat von http://crbug.com/1093731 markiert

Sieht in der Tat so aus, als ob das kanarische Update dieses Problem behebt (oder es zumindest VIEL schwieriger macht, es erneut zu reproduzieren). Lassen Sie dieses Problem offen, bis das Update auf Chrome Stable übertragen wurde, da wir bereits viele doppelte Berichte darüber erhalten.

Das gleiche Problem haben wir auch für ChroPath
Ich habe noch keine dauerhafte Lösung erhalten, aber hier ist die Arbeit um -

1. Ändern Sie das Chrome DevTools-Design nur, wenn es erforderlich ist.
2. Öffnen Sie nun devtools und Sie finden die Erweiterungsregisterkarte in DevTools.
3. Sie können das Thema erneut ändern, was auch immer Sie behalten möchten, und dies wird Ihr Problem beheben.

Hat wie ein Zauber für mich funktioniert, danke! Ich wollte gerade versuchen, meinen Kopf gegen die Wand zu schlagen.

Das ist so seltsam.

Ich muss das devTools-Thema ändern, um dieses Problem zu beheben.

Vielen Dank, @sanjayautonomiq

Aber das ist ein Fehler.

Aber das ist ein Fehler.

Ja.

Insbesondere handelt es sich um einen Chrome-Fehler ( CR-Fehler 1085215 ), wie in der

Dies scheint jetzt für mich in Chrome Stable behoben zu sein, daher werde ich dieses Problem schließen.

Dies scheint jetzt für mich in Chrome Stable behoben zu sein, daher werde ich dieses Problem schließen.

Reproduziert immer noch für mich auf Chrome 83.0.4103.116.

Ich bin damit einverstanden, dass dies keine Korrektur auf der RDT-Seite hat, aber es könnte sich lohnen, dieses Problem offen zu halten, bis dies in Chrome behoben ist.

Gleiches Problem hier Version 83.0.4103.116 (Official Build) (64-Bit)

Ich melde mich und sage, dass es auch ein Problem für mich ist (Version 83.0.4103.116).

Hallo Leute. Es lohnt sich wahrscheinlich nicht, hier weitere "+1" -Kommentare hinzuzufügen, da dies ein Chromium-Fehler ist. Auf der Erweiterungsseite kann ich nichts dagegen tun, damit es funktioniert. Die "+1" -Stimmen sollten besser für den Chromium-Fehler selbst ausgegeben werden: Lächeln: Damit Google weiß, dass es viele Menschen betrifft.

Abgesehen davon wurde der CR-Fehler gemäß diesem Kommentar als behoben markiert und für die Auswahl von Kirschen in Version 84 von Chrome geplant, sodass er hoffentlich bald für alle behoben werden sollte.

In der Zwischenzeit werde ich dieses Problem sperren, um zu vermeiden, dass alle, die oben bereits einen Kommentar abgegeben haben, benachrichtigt werden.