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

J'ai commencé un nouveau projet React Native et je reçois toujours l'avertissement suivant:

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

C'est un peu ennuyeux 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é.

Si vous avez la case à cocher Maintenir la priorité dans la fenêtre du débogueur, essayez de l'activer avant de passer à l'une des solutions ci-dessous.

Pour supprimer l'avertissement dans l'ensemble de votre projet, ajoutez ce qui suit à votre fichier Javascript le plus externe (la plupart du temps, c'est index.jspour React Native)

pour react-native v0.63+:

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

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

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

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

Faites référence à ceci dans la documentation officielle de React Native:

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

react-native v0.56 ou 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 le texte que vous souhaitez.

cette solution fonctionne pour moi

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

peut-être que cela pourrait aider :)

Vous pouvez utiliser React Native Debugger disponible sur https://github.com/jhen0409/react-native-debugger Il s'agit d'une application autonome pour le débogage des applications React Native pendant le développement.

1. Déplacez-vous http://localhost:*****/debugger-uisur la fenêtre séparée.
2. Redémarrez Remote JS Debugging.

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

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

• Ouvrez un onglet de navigation privée, puis collez http: // localhost: 8081 / debugger-ui sur la barre d'adresse et appuyez sur ENTRÉE . Enfin, rechargez l'application (Commande + R) .

• Fermez tous les onglets du navigateur. Gardez seulement 1 onglet ouvert, puis appuyez sur http: // locahost: 8081 / debugger-ui, puis rechargez l'application (Commande + R) .

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 le dit, garder le débogueur distant dans la même fenêtre que les autres onglets

peut ralentir les applications

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

Ce problème a été résolu lorsque j'ai fermé toutes les fenêtres Chrome ouvertes et relancé le débogage de suppression. J'avais auparavant ouvert des fenêtres Chrome, il semble donc que leur ouverture tue les performances.

Depuis cette validation en mars 2017, vous pouvez activer la case à cocher Maintenir la priorité . Lorsqu'il est activé, il lit silencieusement un .wavfichier encodé en base64 pour empêcher l'onglet du navigateur du débogueur de passer en mode basse consommation, ce qui peut affecter les performances de Websocket. Cela empêchera efficacement l'avertissement que vous décrivez.

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']);

Faites référence à ceci dans la documentation officielle de React Native:

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

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 l'avoir sur un bureau séparé qu'il pense être en "Arrière-plan".

J'ai eu le même problème hier. Googler cela a conduit à ce post Stack Overflow . 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 retirer comme sa propre fenêtre, comme le suggère adriansprod, a corrigé cela pour moi.

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, il n'y a aucun moyen de configurer votre application pour désactiver le message.

Le code associé est décrit ci-dessous (la 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, le tout est délimité localement (voir le lien de dépôt ci-dessus pour plus de détails).

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:
* afficher l'état de votre application
* afficher les demandes et réponses d'API
* effectuer des tests de performance rapides
* vous abonner à certaines parties de votre état de l'application
* afficher des messages similaires à console.log
* suivre les erreurs globales avec des traces de pile mappées à la source, y compris des traces de pile de saga!
* expédiez des actions comme une expérience de contrôle de l'esprit gérée par le gouvernement
* échangez à chaud 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

Je l'utilise dans index.js

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

J'avais minimisé la fenêtre " http: // localhost: 8081 / debugger-ui / ". Il suffit de l'ouvrir (sans minimiser) et de recharger l'application pour supprimer l'avertissement.

il peut y avoir des chances qu'un autre débogueur soit déjà connecté au packager. alors fermez votre terminal et débogueur google chrome.

si vous utilisez le gestionnaire de packages de Visual Studio, ne démarrez pas le gestionnaire de packages par une commande Mac / autre terminal OS.

alors fermez tous les terminaux et arrêtez de continuer le gestionnaire de paquets et le débogueur google chrome. recommencez le processus.