Livre-se do aviso “O depurador remoto está em uma guia em segundo plano” no React Native

Comecei um novo projeto React Native e continuo recebendo o seguinte aviso:

O depurador remoto está em uma guia em segundo plano, o que pode fazer com que os aplicativos funcionem lentamente. Corrija isso colocando a guia em primeiro plano (ou abrindo-a em uma janela separada).

É um pouco chato, então eu quero saber como posso me livrar disso? Estou executando o depurador no Chrome e mudei-o para uma janela separada, mas não ajudou.

Para se livrar do aviso em todo o projeto, adicione o seguinte ao seu arquivo Javascript externo (na maioria das vezes, index.jspara React Native)

para reagir nativo v0.57+:

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

Consulte isso nos documentos oficiais do React Native:

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

reagente nativo v0.56 ou abaixo:

Adicione o seguinte logo no início do seu código:

console.ignoredYellowBox = ['Remote debugger'];

Fácil, simples e específico para aquele erro. Funciona para mim. Pode substituir qualquer texto que você quiser.

esta solução funciona para mim

abra / mova http: // localhost: 8081 / debugger-ui (caminho padrão para depuração remota) na janela separada

talvez isso possa ajudar :)

Você pode usar o React Native Debugger disponível em https://github.com/jhen0409/react-native-debugger. É um aplicativo independente para depurar aplicativos React Native durante o desenvolvimento.

1. Vá http://localhost:*****/debugger-uipara a janela separada.
2. Reinicie Remote JS Debugging.

É devido ao número de guias que são abertas no navegador com a guia de UI do React Native Remote Debugger . Eu também enfrentei o mesmo problema.

Para superar essa mensagem de aviso, você pode usar qualquer um dos seguintes métodos:

• Abra uma guia anônima e cole http: // localhost: 8081 / debugger-ui na barra de endereço e pressione ENTER . Finalmente recarregue o aplicativo (Command + R) .

• Feche todas as guias do navegador. Mantenha apenas 1 guia aberta, clique em http: // locahost: 8081 / debugger-ui e recarregue o aplicativo (Command + R) .

Conforme mencionado por @jakeforaker em um dos comentários. O aviso desapareceu simplesmente abrindo o depurador remoto em uma janela separada em vez de uma guia na janela existente do navegador (no entanto, você precisa recarregar o simulador).

Como diz o aviso, manter o depurador remoto na mesma janela que as outras guias

pode fazer com que os aplicativos funcionem lentamente

Então eu acho que simplesmente suprimir o aviso mencionado por @kjonsson: - console.ignoredYellowBox = ['Remote debugger'];não parece ser a melhor solução.

Esse problema foi resolvido quando fechei todas as janelas abertas do Chrome e iniciei a remoção de depuração novamente. Eu já tinha aberto as janelas do Chrome, então 'parece' que tê-las abertas mata o desempenho.

Desde este compromisso em março de 2017, você pode habilitar a caixa de seleção Manter prioridade . Quando ativado, ele reproduz silenciosamente um .wavarquivo codificado em base64 para evitar que a guia do navegador do depurador entre no modo de baixo consumo de energia, o que pode afetar o desempenho do websocket. Isso impedirá efetivamente o aviso que você descreve.

Acho que a resposta aceita não é mais precisa (pelo menos para React Native v0.57 +).

O código correto agora é:

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

Consulte isso nos documentos oficiais do React Native:

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

Estou no Macbook. Corrigi esse problema trazendo a janela do depurador para a área de trabalho principal, em vez de colocá-la em uma área de trabalho separada, que ela pensa estar em "Segundo plano".

Tive o mesmo problema ontem. Pesquisar no Google levou a esta postagem Stack Overflow . Em uma das respostas (por adriansprod), ele sugeriu:

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

É provável que o depurador React Native não esteja em sua própria janela do navegador Chrome, mas em uma guia do navegador Chrome. Puxá-lo para fora como sua própria janela, como sugere o adriansprod, consertou isso para mim.

A (muito irritante) mensagem de erro é tratada por debuggerWorker.js , que infelizmente não inclui nenhuma opção de configuração para desligar a mensagem. Portanto, por enquanto, não há como configurar seu aplicativo para desativar a mensagem.

O código relacionado é descrito abaixo ( licença original se aplica):

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 você pode ver, nenhuma opção de configuração é usada, todo o escopo é definido localmente (consulte o link de repositório acima para obter mais detalhes).

Eu também enfrentei o mesmo problema há cerca de uma semana e finalmente encontrei uma solução que funciona excelente para mim

É chamado reactotron, você pode encontrá-lo aqui - https://github.com/reactotron/reactotron e você pode usá-lo para:
* visualizar o estado do seu aplicativo
* mostrar solicitações e respostas da API
* realizar benchmarks de desempenho rápido
* inscrever-se em partes do seu estado do aplicativo
* exibe mensagens semelhantes a console.log
* rastreia erros globais com rastreamentos de pilha mapeados na origem, incluindo rastreamentos de pilha saga!
* despache ações como um experimento de controle mental administrado pelo governo
* troca a quente do estado do seu aplicativo
* monitore suas sagas

Espero que minha postagem tenha sido útil e você nunca se depare com esse aviso tedioso.

Boa sorte

Eu uso isso em index.js

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

Eu havia minimizado a janela " http: // localhost: 8081 / debugger-ui / ". Apenas abri-lo (não minimizando) e recarregar o aplicativo removeu o aviso.

pode haver a chance de que outro depurador já esteja conectado ao empacotador. então feche seu terminal e depurador do google chrome.

se você estiver usando o gerenciador de pacotes do Visual Studio, não inicie o gerenciador de pacotes pelo comando de terminal do Mac / outro sistema operacional.

então feche todos os terminais e pare de seguir o gerenciador de pacotes e o depurador do Google Chrome. inicie o processo novamente.