Hola. Tengo el mismo problema. Quizás esta información sea útil:
1) Cuando abro algunas de las "páginas" (sea P1 ) de mi SPA, luego abro DevTools. No puedo ver las pestañas "Componentes" y "Perfilador".
2) Cierro DevTools
3) Luego cambio a la otra "página" de SPA (que sea P2 )
4) Abrir DevTools mientras estoy en P2
5) Ahora veo las pestañas "Componentes" y "Generador de perfiles"
6) Sin cerrar DevTools, vuelvo a P1 , las dos pestañas de la extensión RDT siguen aquí, beneficio :)

@ Roman-Popov ¿Puedes reproducir esto de manera confiable? ¿Importa qué son p1 y p2? (Si algo sobre las aplicaciones parece significativo, ¿puede compartirlo conmigo de alguna manera para que pueda reproducirlo?)

También qué navegador + SO

@ Roman-Popov @bengry (o cualquier otra persona que vea esto y pueda reproducir) Si puede reproducir, ¿estaría dispuesto a probar una nueva versión de DevTools (que podría compartir aquí) para ver si el problema persiste?

Podría intentar hacer una compilación con # 18860 retirado. (Esa es la única confirmación en el conjunto de cambios 4.6-> 4.7 que parece remotamente sospechosa).

@bvaughn Acerca de p1 y p2. Sí, parece que hay una diferencia entre ellos. P2, donde RDT no se muestra por defecto, contiene muchos más elementos dom. Y aquí hay un detalle más: la pestaña Redux-devtools se comporta exactamente como las pestañas RDT.

¿Qué pasa con la página https://reactjs.org/ (problema mencionado por @bengry)? Yo también lo vi. Pero lo comprobó de nuevo ahora y no veo problemas. Se muestran las pestañas, todo está bien.

Probablemente en mi caso haya algún problema de memoria en mi proyecto o algo como esto. Porque si elimino listas largas de P2, aparecen las pestañas devtools.

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

@ Roman-Popov ¡Gracias por la información agregada!

¿Alguna posibilidad de que puedas compartir la reproducción (o acceder a ella) conmigo para que pueda ver qué está pasando?

Alternativamente, ¿estaría dispuesto a instalar una compilación de devtools única si adjunto una aquí? (Solo para ver si todavía puedes reproducirlo)

Encontré el mismo problema en nuestro SPA. Pude hacer que las pestañas Componentes y Profiler aparecieran en Chrome Dev Tools cuando inspeccioné nuestra aplicación en la "vista" móvil (que cambia la representación inicial de los componentes). Actualicé y cambié de nuevo a escritorio / "vista" receptiva (las herramientas de desarrollo están abiertas todo el tiempo), las pestañas permanecieron visibles.

Para nuestro SPA, la mayor diferencia entre la página de destino móvil y de escritorio es que en el escritorio mostramos un cajón abierto con una lista virtualizada de reacción. Este cajón no se abre ni se procesa inmediatamente en el móvil. No estoy seguro de si esta información ayuda, sé que es solo una ruta de navegación. Actualizaré si encuentro algo más.

Estaría encantado de probar una compilación personalizada para ver si resuelve el problema.

Porque si elimino listas largas de P2, aparecen las pestañas devtools.

¡Sí! React-virtualizado. También lo uso para listas largas que mencioné en mi mensaje anterior.
overscanRowCount={600} está configurado para lista envuelta. Es lo suficientemente grande, pero solo hay marcadores de posición muy livianos con un par de elementos dom (para mantener la búsqueda del navegador en la lista presionando ctrl + f). Si degrado overscanRowCount a + -50, entonces el problema con las pestañas faltantes desaparecerá.

Interesante. Entonces parece que el problema tiene algo que ver con el tamaño del árbol, o tal vez con la cantidad de hijos en un solo padre ... @ Roman-Popov, ¿podrías reproducir esto por casualidad en un Code Sandbox o algo así? (¿Ya que no puedo mirar P2 directamente, supongo?)

En otras noticias, sin embargo, overscanRowCount={600} parece ... muy inesperadamente alto. No hubiera aconsejado que el valor estuviera por encima de un número de un solo dígito. RV y RW existen para evitar generar y trabajar en listas largas. 600 significa que está renderizando las filas de la ventana gráfica, más hasta 1200 más.

¿Reactjs.org también usa react-virtualized ? Porque el problema se reprodujo para mí también allí (de hecho, este problema se abrió con eso como ejemplo). Lo usamos en nuestra aplicación, pero con un recuento de sobrebarrido menor, y aún sucedió allí.

¿Reactjs.org también usa react-virtualized ? Porque el tema se reprodujo para mi tambien

Funcionando bien para mí en reactjs.org.

En nuestra propia aplicación no usamos react-virtualized, pero podemos reproducir el problema.

editar: Tengo el mismo problema en una nueva aplicación de reacción creada por create-react-app.

Creo que esto podría estar relacionado con Chrome 83, comencé a tener este problema después de actualizar a 83 y puedo reproducirlo en Chrome Canary 85.

Un colega que usa Chromium 81 no tiene el problema de usar la misma aplicación.

@bvaughn

overscanRowCount = {600} parece ... muy inesperadamente alto.
....
RV y RW existen para evitar generar y trabajar en listas largas

Verdadero: sé de rendimiento. Eso no fue una buena solución, pero sí rápida. Más tarde hago una especie de búsqueda personalizada, por supuesto :)
Sobre el código fuente para mostrar mi aplicación e intentar reproducirla, lo siento, creo que no puedo hacer eso, NDA y demás, ya sabes. Pero puedo intentar hacer un pequeño proyecto CRA con listas react-virtualized , páginas pesadas, etc. Y compartir ese repositorio si vuelvo a detectar este error. Intentaré encontrar algo de tiempo para esta investigación)

Creo que esto podría estar relacionado con Chrome 83, comencé a tener este problema después de actualizar a 83 y puedo reproducirlo en Chrome Canary 85.

Un colega que usa Chromium 81 no tiene el problema de usar la misma aplicación.

Esta sería información muy útil para confirmar. @ianvieira ¿ muy confiable, ¿podría probar una versión anterior de Chromium y ver si ya no se reproduce?

Si es así, avíseme y me comunicaré con el equipo de Chrome.

Solo para probar una cosa más, si alguien más puede reproducir este problema de manera bastante confiable, ¿probaría esta compilación de extensión y avíseme si ayuda?

ReactDevTools.zip

Realmente no lo espero, pero me gustaría descartar cambios recientes de WebPack.

Para instalar la extensión anterior:

1. Descárgalo y descomprímelo en algún lugar
2. Abra chrome://extensions/ en su navegador
3. Haga clic en la pequeña palanca para deshabilitar la extensión React DevTools
4. Haga clic en el botón "Cargar desembalado"
5. Seleccione la carpeta de extensión descomprimida del paso 1

@bvaughn Pensé que podría reproducirlo de manera consistente, pero después de ir a https://reactjs.org (que mostraba las pestañas correctamente) y volver a mi aplicación con la consola abierta, ahora funciona de manera consistente.

En Chrome Canary todavía puedo reproducirlo de forma coherente en mi aplicación con varios nodos. Probaré la versión que enviaste.

Me di cuenta de que esto también parece matar a todas mis otras pestañas de consola agregadas por extensiones. Redux, etc.

Me di cuenta de que esto también parece matar a todas mis otras pestañas de consola agregadas por extensiones. Redux, etc.

Empiezo a sospechar que esto tiene algo que ver con Chrome.

He escuchado informes de otros que dicen que Relay DevTools está fallando, lo que hace que React DevTools se rompa. Ahora lo veo decir que esto también afecta a Redux DevTools.

No hay nada que React (o Relay) deba hacer que se afecte entre sí, o la extensión de Redux.

Me di cuenta de que esto también parece matar a todas mis otras pestañas de consola agregadas por extensiones. Redux, etc.

Yo noté lo mismo. Acabo de probar en Chrome Canary, tuve el mismo comportamiento, después de ir a https://reactjs.org aparecen las pestañas React, junto con otras:

Lo intenté antes con https: // localhost : 3000 (sin éxito al abrir y cerrar Dev Tools) y con https://farfetch.com. Las pestañas simplemente reaparecieron con https://reactjs.org y después de cerrar las Herramientas de desarrollo entre Farfetch y React y actualizar la página.

Oh, por cierto, estaba usando la versión que enviaste a @bvaughn.

Por alguna razón, puedo ver las pestañas solo en https://reactjs.org en Canary. Localhost sigue sin él (no solo los de reacción, sino todos). Sospecho que tengo la pestaña en el establo porque abrí localhost después de que se abrieran los documentos de React con las herramientas de desarrollo.

Intenté hacer lo mismo, pero no puedo tenerlo en localhost de manera constante en Chrome Canary.

EDITAR: Después de cerrar la pestaña del navegador, accedí a React docs en estable, las pestañas faltan nuevamente. Realmente parece ser un problema de Chrome

Este problema no es determinista. A veces funciona, a veces no. No creo que debamos leer demasiado en un solo éxito .

Chrome v83 se lanzó un día después de React DevTools v4.7.

Aquí está la versión anterior de React DevTools (4.6) si alguien quisiera probarla para ver si algo cambia:
ReactDevTools-4.6.zip

Sin embargo, por lo que estoy escuchando, suena cada vez más como un problema de Chrome.

Ni la versión experimental ni la 4.6 me funcionan (solo la solución mencionada anteriormente). También tengo la sensación de que se trata de un problema de Chrome, ya que el error se produjo después de actualizar Canary hace unos días y persiste desde entonces, pero la extensión funciona correctamente en Estable.

También puede valer la pena señalar que reactjs.org siempre ha tenido problemas ocasionales con la pestaña de extensión que no aparece. No estoy seguro de por qué, pero un fallo ocasional no es nada nuevo . Lo que parece ser nuevo es la frecuencia de esta falla y el hecho de que está sucediendo en otros sitios, y el hecho de que parece estar sucediendo también con otras extensiones. (Por eso creo que es un problema de Chrome / Chromium)

No tengo idea de cómo funciona la extensión y tampoco puedo crear un caso de prueba reducido. Pero tal vez esto te ayude de alguna manera:

En reactjs.org, donde funciona la extensión, el objeto window tiene __REACT_DEVTOOLS_COMPONENT_FILTERS__ , __REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ y __REACT_DEVTOOLS_GLOBAL_HOOK__ .

Este último se ve así:

En la aplicación donde la extensión no funciona, solo existe __REACT_DEVTOOLS_GLOBAL_HOOK__ y se ve así:

¿Hay alguna manera de conectarse a la extensión ( main.js ?), Tal vez incluso adjuntar un depurador, para encontrar un posible error? (Probé background.js pero este no parece ser el lugar correcto para mirar).

@bvaughn también creo que esto puede ser un error de Chromium (tenga en cuenta Chromium, y no Chrome, ya que obtengo exactamente el mismo comportamiento de error en Edge). Opera funciona bien para mí con el RDT más reciente, así que supongo que aún no se han actualizado a Chromium 83 (aunque no estoy cerca de un cálculo para verificar en este momento).

Abrí el error aquí ya que parece ser transmitido al RDT (tampoco sabía que otros como Relay y Redux DT no funcionaran), por lo que podría ser con alguna integración entre los dos. Tal vez una API de extensión que está causando el problema y cambió en Chromium 83.

¿Se puso en contacto con el equipo de Chromium / Chrome sobre esto como mencionó anteriormente?

En este punto, acordé que parece probable que sea un error de Chromium (que se lanzó con las actualizaciones recientes de Chrome 83 y Edge 83).

He hecho ping a uno de los desarrolladores en Twitter, pero aún no he recibido respuesta.

¿Hay alguna manera de conectarse a la extensión (main.js?), Tal vez incluso adjuntar un depurador, para encontrar un posible error? (Probé background.js pero este no parece ser el lugar correcto para mirar).

@maxbeier Hay un par de formas de depurar extensiones. Algunas extensiones inyectan código en la página que está viendo (al igual que React DevTools), en cuyo caso puede depurarlo usando el flujo de trabajo normal.

También es posible que desee depurar la interfaz de usuario de la extensión, lo que puede hacer desconectando / desacoplando el panel DevTools y abriendo una segunda ventana de DevTools para inspeccionar la primera, así (estoy usando ⌘ + J ):

También puede abrir la extensión (chrome: // extensions /? Id = aogeonfmjfclepddhjhilmncnhooehhl) y elegir "Detalles" e "Inspeccionar vistas".

Por cierto, esto parece ser un problema de Chromium que también está afectando a Vue y Redux DevTools.

Si tiene una cuenta de error de CR, considere protagonizar este problema:
https://bugs.chromium.org/p/chromium/issues/detail?id=1085215

No estoy seguro de si esta es la respuesta que está buscando, pero en Urql Devtools hemos intentado dejar de usar chrome.devtools.inspectedWindow.eval en favor del apretón de manos debido a la imprevisibilidad como esta.

El problema de evaluar una ventana inspeccionada es que puede terminar con condiciones de carrera o una dependencia del sondeo, como en el caso de react devtools.

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

No he podido reproducir el error, pero no me sorprendería que Chrome esté haciendo algo extraño con las llamadas de intervalo en las extensiones. No es divertido, pero el apretón de manos puede hacer las cosas un poco más sencillas. Sé que la mensajería es algo que los documentos de Chrome fomentan sobre las evaluaciones de ventanas por razones de seguridad.

Esa es una sugerencia interesante, @andyrichardson. ¡Gracias!

También nos enfrentamos al mismo problema para ChroPath
Todavía no obtuve una solución permanente, pero aquí está el trabajo:

1. Cambie el tema de Chrome DevTools, solo una vez que sea necesario.
2. Ahora abra devtools, encontrará la pestaña de extensión en DevTools.
3. Puede volver a cambiar el tema lo que quiera conservar y esto solucionará su problema.

Gracias, @sanjayautonomiq , este trabajo para mí

Esto me ha estado sucediendo durante más de un año en Chrome. Normalmente, al volver a cargar la página, vuelven a aparecer los componentes y la pestaña Profiler. solo quería señalar que no es solo la última versión, ha estado sucediendo desde la v16 desde que tengo memoria

Esto me ha estado sucediendo durante más de un año en Chrome. Normalmente, al volver a cargar la página, vuelven a aparecer los componentes y la pestaña Profiler. solo quería señalar que no es solo la última versión, ha estado sucediendo desde la v16 desde que tengo memoria

Creo que puede ser algo de tu parte, ya que personalmente no he visto esto en el último año AFAIR, y como se mencionó, esto no sucede en la última versión de Opera al momento de escribir esto (Opera 68, Chromium 81), y para mí, actualizar la página no ayuda. Sin embargo, la solución alternativa sugerida por @sanjayautonomiq sí.
Incluso si este error ha existido durante al menos un año, algo en las últimas semanas lo ha empeorado (nuevas versiones de Chromium y / o nuevas RDT), como se evidencia en todas las reacciones en este número.

Incluso si este error ha existido durante al menos un año, algo en las últimas semanas lo ha empeorado (nuevas versiones de Chromium y / o nuevas RDT), como se evidencia en todas las reacciones en este número.

Ciertamente verdad. Hice ping al error CR de nuevo. Esta regresión es bastante disruptiva.

FYI, acabo de marcar http://crbug.com/1085215 como un duplicado de http://crbug.com/1093731. Hace unos 8 días se envió una solución para este último problema. Vuelva a realizar la prueba en Canary y, si no se soluciona el problema, dedupe 1085215.

De hecho, parece que la solución Canary resuelve este problema (o al menos lo hace MUCHO más difícil de reproducir). Sin embargo, vamos a dejar este problema abierto hasta que la solución se haya implementado en Chrome estable, ya que estamos recibiendo muchos informes duplicados de esto.

También nos enfrentamos al mismo problema para ChroPath
Todavía no obtuve una solución permanente, pero aquí está el trabajo:

1. Cambie el tema de Chrome DevTools, solo una vez que sea necesario.
2. Ahora abra devtools, encontrará la pestaña de extensión en DevTools.
3. Puede volver a cambiar el tema lo que quiera conservar y esto solucionará su problema.

Funcionó como un encanto para mí, ¡gracias! Estaba a punto de intentar golpearme la cabeza contra la pared.

Esto es tan extraño.

Tengo que cambiar el tema de devTools para solucionar este problema.

Gracias, @sanjayautonomiq

Pero esto es un error.

Pero esto es un error.

Si.

Específicamente, es un error de Chrome (error CR 1085215 ) como se menciona en la descripción del problema: sonrisa: no hay nada que podamos hacer (aquí) para solucionarlo.

Esto parece estar resuelto ahora para mí en Chrome estable, así que voy a cerrar este problema.

Esto parece estar resuelto ahora para mí en Chrome estable, así que voy a cerrar este problema.

Todavía se reproduce para mí en Chrome 83.0.4103.116.

Estoy de acuerdo que esto no tiene solución en el lado de RDT, pero podría valer la pena mantener este problema abierto hasta que se solucione en Chrome.

Mismo problema aquí Versión 83.0.4103.116 (compilación oficial) (64 bits)

Voy a intervenir y decir que también es un problema para mí (Versión 83.0.4103.116).

Hey gente. Probablemente no valga la pena agregar más comentarios "+1" aquí, ya que se trata de un error de Chromium. No hay nada que pueda hacer al respecto en el lado de la extensión para que funcione. Los votos "+1" se gastarían mejor en el error de Chromium en sí: sonrisa: para que Google sepa que está impactando a mucha gente.

Dicho esto, el error de CR se ha marcado como corregido y programado para su selección en v84 de Chrome según este comentario, por lo que debería resolverse pronto para todos, con suerte.

Mientras tanto, voy a bloquear este problema solo para evitar enviar notificaciones no deseadas a todos los que ya han comentado anteriormente.