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

86

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.

react-native

— mxmtsk
fonte

Para outros que estão lendo isso, acho que você precisa de um depurador mais rápido em vez de ignorar esses avisos. A resposta abaixo de @varunvs para usar o react-native-debugger remove o aviso e reduz o tempo de saída do seu dispositivo

— Vineeth Pradhan

3

A resposta correta ( abaixo ) agora é simplesmente marcar a caixa de seleção "Manter prioridade" na página do depurador.

— orome

148

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.

— Kjonsson
fonte

Adicionado pouco antes de minha instrução AppRegistry.registerComponent e funcionou! Obrigado

— İlter Kağan Öcal

1

Eu coloquei esse código no meu nível superior index.js. Funciona como um encanto. if (__DEV__) { console.ignoredYellowBox = ['Remote debugger']; }

— Mike S.

@MikeS. Recebi um aviso [eslint] '__DEV__' is not defined. (no-undef). Você também entende?

— anticafe

@anticafe Não, não recebo nenhum aviso. Portanto, não tenho certeza de qual seria o problema.

— Mike S.

Ei, estou usando, YellowBox.ignoreWarnings(['Remote debugger', 'Require cycles']);mas os dois avisos ainda estão aparecendo na janela do console. Estou usando a versão 0.61.4 do RN. Por favor, ajude

— Archana Sharma

38

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 :)

— anztrax
fonte

5

apenas mova a guia de seu grupo normal de 37 guias para sua própria janela. obrigado

— jakeforaker

Sim, isso funciona. Mas alguém pode me dizer por que isso?

— Ranjan de

24

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.

— Varunvs
fonte

3

Obrigado, com certeza vou experimentar, mas não é exatamente o que estou procurando como resposta porque não resolve o aviso.

— Estranhamente

1

Eu tive o problema semelhante, mas o uso do depurador React Native resolveu.

— varunvs

Obrigado, optei por esta solução porque manter o depurador em suas próprias janelas não apaga o aviso para mim o tempo todo

— mxmtsk

2

Instalar outra ferramenta apenas para remover um aviso não é a melhor solução, e essa outra ferramenta tem seus próprios problemas. A resposta correta é a de kjonsson abaixoconsole.ignoredYellowBox = ['Remote debugger'];

— laurent

1

@ this.lau_ Isso não apenas esconde o aviso e não corrige o problema real? Acredito que o problema que estamos tentando resolver é consertar o desempenho lento do aplicativo durante a depuração. Esconder um aviso à força não o corrigirá.

— varunvs

8

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

— Ramzan Chasygov
fonte

6

É 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) .

— higiênico
fonte

6

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.

— Ashish Pisey
fonte

5

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.

— dnp
fonte

5

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.

— aleclarson
fonte

4

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

— Stud Sterkel
fonte

2

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".

— Parth Chokshi
fonte

0

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.

— alee8
fonte

0

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).

— Nit
fonte

0

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

— Probojnik
fonte

0

Eu uso isso em index.js

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

— Mike S.
fonte

Eu também importeiimport { AppRegistry, YellowBox } from 'react-native';

— Mike S.

Embora eu apenas tenha testado novamente em um novo aplicativo e não pareça estar funcionando. Será que algo mudou em 0.57.4?

— Mike S.

0

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

— Kernelman
fonte

0

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.

— Deepak Singh
fonte