web-dev-qa-db-fra.com

Supprimez l'avertissement "Le débogueur distant se trouve dans un onglet en arrière-plan" dans React Native

J'ai lancé un nouveau projet React Native et l'avertissement suivant continue à apparaître:

Le débogueur distant se trouve dans un onglet en arrière-plan, ce qui peut ralentir le fonctionnement des applications. Corrigez cela en mettant en avant l'onglet (ou en l'ouvrant dans une fenêtre séparée).

C'est un peu agaçant alors je veux savoir comment je peux m'en débarrasser? J'exécute le débogueur dans Chrome et je l'ai déplacé vers une fenêtre distincte, mais cela n'a pas aidé.

react-native
67
Max Tommy Mitschke

Pour vous débarrasser de l'avertissement de l'ensemble de votre projet, ajoutez ce qui suit dans votre fichier le plus à l'extérieur Javascript (la plupart du temps il s'agit de index.js pour React Native)

pour react-nativev0.57+:

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

Référencez-le dans les documents officiels React Native:

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

react-nativev0.56ou inférieur:

Ajoutez ce qui suit au début de votre code:

console.ignoredYellowBox = ['Remote debugger'];

Facile, simple et spécifique à cette erreur. Travaille pour moi. Peut remplacer n'importe quel texte que vous voulez.

121
kjonsson

cette solution est un travail pour moi 

ouvrir/déplacer http: // localhost: 8081/debugger-ui (chemin par défaut du débogage distant) dans la fenêtre séparée 

peut-être que cela pourrait aider :)

25
anztrax

Vous pouvez utiliser le débogueur natif de React disponible à l’adresse https://github.com/jhen0409/react-native-debugger . Il s’agit d’une application autonome permettant de déboguer les applications natives de React pendant le développement.

22
varunvs
  1. Déplacez http://localhost:*****/debugger-ui dans la fenêtre séparée.
  2. Redémarrez Remote JS Debugging.
7
Ramzan Chasygov

Cela est dû au nombre d'onglets ouverts dans le navigateur avec l'onglet d'interface utilisateur React Native Remote Debugger. J'ai aussi fait face au même problème. 

Pour surmonter ce message d'avertissement, vous pouvez utiliser l'une des méthodes suivantes:

4
hygull

Ce problème a été résolu lorsque j'ai fermé toutes les fenêtres Chrome ouvertes et démarré à nouveau Supprimer le débogage. J'avais précédemment ouvert des fenêtres Chrome. Il semble donc que leur ouverture tue les performances.

4
dnp

Comme mentionné par @jakeforaker dans l'un des commentaires. L'avertissement a disparu en ouvrant simplement le débogueur distant dans une fenêtre séparée au lieu d'un onglet dans la fenêtre existante de votre navigateur (vous devez cependant recharger votre simulateur). 

Comme l'avertissement dit de garder le débogueur distant dans la même fenêtre que les autres onglets 

peut ralentir les applications

Donc, je pense que simplement supprimer l'avertissement comme mentionné par @kjonsson: - console.ignoredYellowBox = ['Remote debugger']; ne semble pas être la meilleure solution.

3
Ashish Pisey

Je pense que la réponse acceptée n’est plus exacte (du moins pour React Native v0.57 +).

Le code correct est maintenant:

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

Référencez-le dans les documents officiels React Native:

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

2
Stud Sterkel

J'ai également été confronté au même problème il y a environ une semaine et j'ai finalement trouvé une solution qui fonctionne parfaitement pour moi.

Il s’appelle reactotron, vous pouvez le trouver ici - https://github.com/reactotron/reactotron et vous pouvez l’utiliser pour:
* voir l'état de votre application
* afficher les requêtes et réponses de l'API
* effectuer des tests de performance rapides
* s'abonner à des parties de l'état de votre application
* afficher des messages similaires à console.log
* trace les erreurs globales avec les traces de pile mappées par la source, y compris les traces de pile saga!
* déclenche des actions comme une expérience de contrôle de l'esprit menée par le gouvernement
* échange à chaud de l'état de votre application
* Suivez vos sagas

J'espère que mon message a été utile et que vous ne serez jamais confronté à cet avertissement fastidieux. 

Bonne chance

0
Probojnik

Je suis sur Macbook. J'ai résolu ce problème en apportant la fenêtre du débogueur sur le bureau principal, plutôt que de la placer sur un bureau séparé, ce qui, à son avis, est en "arrière-plan".

 enter image description here

0
Parth Chokshi

J'ai eu le même problème hier. Googler cela a conduit à cette Stack Overflow post . Dans l'une des réponses (par adriansprod), il a suggéré:

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

Il est probable que votre débogueur React Native ne se trouve pas dans sa propre fenêtre de navigateur Chrome mais dans un onglet de navigateur Chrome. Le fait de le sortir comme sa propre fenêtre, comme le suggère un membre, l’a corrigé pour moi.

0
alee8

J'utilise ceci dans index.js

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

Le message d'erreur (très ennuyeux) est géré par debuggerWorker.js , qui n'inclut malheureusement aucune option de configuration pour désactiver le message. Donc, pour le moment, vous ne pouvez pas configurer votre application pour désactiver le message. 

Le code associé est décrit ci-dessous ( licence d'origine s'applique): 

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).'
    );
  };
})();

Comme vous le voyez, aucune option de configuration n’est utilisée, l’ensemble est délimité localement (voir le lien du rapport ci-dessus pour plus de détails).

0
Nit

Depuis ce commit en mars 2017, vous pouvez activer la case à cocher Conserver la priorité. Lorsqu'il est activé, silently lit un fichier .wav codé en base64 pour empêcher le navigateur du débogueur de passer en mode faible consommation, ce qui peut affecter les performances de WebSocket. Cela empêchera efficacement l'avertissement que vous décrivez.

0
aleclarson