Deshágase de la advertencia "El depurador remoto está en una pestaña en segundo plano" en React Native

Comencé un nuevo proyecto React Native y sigo recibiendo la siguiente advertencia:

El depurador remoto se encuentra en una pestaña en segundo plano, lo que puede hacer que las aplicaciones funcionen lentamente. Solucione esto colocando la pestaña en primer plano (o abriéndola en una ventana separada).

Es un poco molesto, así que quiero saber cómo puedo deshacerme de él. Estoy ejecutando el depurador en Chrome y lo moví a una ventana separada, pero no ayudó.

Si tiene la casilla de verificación Mantener prioridad en la ventana del depurador, intente habilitarla antes de pasar a cualquiera de las siguientes soluciones.

Para deshacerse de la advertencia en todo su proyecto, agregue lo siguiente a su archivo Javascript más externo (la mayoría de las veces es index.jspara React Native)

para react-native v0.63+:

Uso LogBox: https://reactnative.dev/docs/debugging#logbox

LogBox.ignoreLogs(['Remote debugger']);

para react-native v0.57 - v0.62:

import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Remote debugger']);

Haga referencia a esto de los documentos oficiales de React Native:

https://facebook.github.io/react-native/docs/debugging.html

react-native v0.56 o por debajo:

Agregue lo siguiente al principio de su código:

console.ignoredYellowBox = ['Remote debugger'];

Fácil, simple y específico para ese error. Funciona para mi. Puede sustituir cualquier texto que desee.

esta solución es un trabajo para mí

abrir / mover http: // localhost: 8081 / debugger-ui (ruta predeterminada para la depuración remota) en la ventana separada

tal vez eso pueda ayudar :)

Puede usar React Native Debugger disponible en https://github.com/jhen0409/react-native-debugger Es una aplicación independiente para depurar aplicaciones React Native durante el desarrollo.

1. Avanza http://localhost:*****/debugger-uipor la ventana separada.
2. Reiniciar Remote JS Debugging.

Esto se debe a la cantidad de pestañas que se abren en el navegador con la pestaña React Native Remote Debugger UI . También enfrenté el mismo problema.

Para superar este mensaje de advertencia, puede utilizar cualquiera de los siguientes métodos:

• Abra una pestaña de incógnito, luego pegue http: // localhost: 8081 / debugger-ui en la barra de direcciones y presione ENTER . Finalmente recargue la aplicación (Comando + R) .

• Cierre todas las pestañas del navegador. Mantenga solo una pestaña abierta, luego presione http: // locahost: 8081 / debugger-ui y luego vuelva a cargar la aplicación (Comando + R) .

Como lo menciona @jakeforaker en uno de los comentarios. La advertencia desapareció simplemente abriendo el depurador remoto en una ventana separada en lugar de una pestaña en la ventana existente de su navegador (sin embargo, debe volver a cargar su simulador).

Como dice la advertencia, mantener el depurador remoto en la misma ventana que otras pestañas

puede hacer que las aplicaciones funcionen lentamente

Así que creo que simplemente suprimir la advertencia como lo menciona @kjonsson: console.ignoredYellowBox = ['Remote debugger'];no parece ser la mejor solución.

Este problema se resolvió cuando cerré todas las ventanas abiertas de Chrome e inicié Quitar depuración nuevamente. Anteriormente había tenido ventanas de Chrome abiertas, por lo que "parece" que tenerlas abiertas mata el rendimiento.

Desde esta confirmación en marzo de 2017, puede habilitar la casilla de verificación Mantener prioridad . Cuando está habilitado, reproduce silenciosamente un .wavarchivo codificado en base64 para evitar que la pestaña del navegador del depurador entre en modo de bajo consumo, lo que puede afectar el rendimiento de websocket. Esto evitará eficazmente la advertencia que describe.

Creo que la respuesta aceptada ya no es precisa (al menos para React Native v0.57 +).

El código correcto es ahora:

import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Remote debugger']);

Haga referencia a esto de los documentos oficiales de React Native:

https://facebook.github.io/react-native/docs/debugging.html

Estoy en Macbook. Solucioné este problema colocando la ventana del depurador en el escritorio principal, en lugar de tenerla en un escritorio separado que cree que está en "Fondo".

Ayer me apareció el mismo problema. Buscar en Google lo llevó a esta publicación de Stack Overflow . En una de las respuestas (por adriansprod), sugirió:

Chrome debugger in it's own window fixes. But annoying problem

Es probable que su depurador React Native no esté en su propia ventana del navegador Chrome, sino en una pestaña del navegador Chrome. Sacarlo como su propia ventana, como sugiere adriansprod, solucionó esto por mí.

El mensaje de error (muy molesto) es manejado por debuggerWorker.js, que lamentablemente no incluye ninguna opción de configuración para desactivar el mensaje. Entonces, por el momento, no hay formas de configurar su aplicación para deshabilitar el mensaje.

El código relacionado se describe a continuación ( se aplica la licencia original ):

var visibilityState;
var showVisibilityWarning = (function() {
  var hasWarned = false;
  return function() {
    // Wait until `YellowBox` gets initialized before displaying the warning.
    if (hasWarned || console.warn.toString().includes('[native code]')) {
      return;
    }
    hasWarned = true;
    console.warn(
      'Remote debugger is in a background tab which may cause apps to ' +
      'perform slowly. Fix this by foregrounding the tab (or opening it in ' +
      'a separate window).'
    );
  };
})();

Como puede ver, no se utilizan opciones de configuración, todo el asunto tiene un alcance local (consulte el enlace de repositorio anterior para obtener más detalles).

También me enfrenté al mismo problema hace una semana y finalmente encontré una solución que funciona excelente para mí

Se llama reactotron, puede encontrarlo aquí: https://github.com/reactotron/reactotron y puede usarlo para:
* ver el estado de su aplicación
* mostrar solicitudes y respuestas de API
* realizar evaluaciones comparativas de rendimiento rápido
* suscribirse a partes de su el estado de la aplicación
* muestra mensajes similares a console.log
* rastrea errores globales con rastreos de pila asignados en origen, incluidos rastreos de pila de saga!
* Acciones de despacho como un experimento de control mental dirigido por el gobierno
* intercambio en caliente estado de su aplicación
* seguimiento de sus sagas

Espero que mi publicación haya sido útil y que nunca se enfrente a esta tediosa advertencia.

Buena suerte

Yo uso esto en index.js

if (__DEV__) {
  console.ignoredYellowBox = [
    'Remote debugger',
    'Warning: isMounted… is deprecated',
    'Module RCTImageLoader'
  ];
}

Había minimizado la ventana " http: // localhost: 8081 / debugger-ui / ". Con solo abrirlo (des minimizar) y volver a cargar la aplicación, se eliminó la advertencia.

puede haber posibilidades de que otro depurador ya esté conectado al empaquetador. así que cierra tu terminal y depura Google Chrome.

Si está utilizando el administrador de paquetes de Visual Studio, no inicie el administrador de paquetes con el comando de Mac / otro sistema operativo.

así que cierre todos los terminales y deténgase en el administrador de paquetes y el depurador de Google Chrome. iniciar el proceso de nuevo.