Débarrassez-vous de l'avertissement "débogueur distant est dans un onglet d'arrière-plan" dans React Native

Vous pouvez utiliser le débogueur natif React disponible à https://github.com/jhen0409/react-native-debugger c'est une application autonome pour le débogage des applications natives React pendant le développement.

Cette solution est un travail 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:)

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

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

C'est à cause du nombre d'onglets ouverts dans le navigateur avec Réagir Natif Débogueur à Distance de l'INTERFACE utilisateur, onglet. J'ai également fait face au même problème.

Pour surmonter ce message d'avertissement, vous pouvez utiliser une méthode parmi les suivantes:

• Ouvrez un onglet de navigation privée puis collez http://localhost:8081/debugger-ui sur la barre d'adresse et appuyez sur Entrez . 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 votre fenêtre existante de votre navigateur (vous devez cependant recharger votre simulateur).

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

Peut provoquer des applications à exécuter lentement

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

Je pense que la réponse acceptée n'est plus précise (au moins pour React Native v0. 57+).

Le code correct est maintenant:

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

Référencez-le à partir des documents natifs officiels React:

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

J'ai eu le même problème hier. Googler cela a conduit à ce Post de débordement de pile . 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 natif React ne se trouve pas dans sa propre fenêtre de navigateur Chrome, mais dans un onglet de navigateur Chrome. Tirant comme sa propre fenêtre, comme adriansprod suggèrent, fixé pour moi.

Le message d'erreur (très ennuyeux) est géré par debuggerWorker.js, ce 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 connexe est décrit ci-dessous ( licence originale 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ésactivé localement (voir le lien repo ci-dessus pour plus de détails).

J'ai aussi fait face au même problème il y a environ une semaine et finalement j'ai trouvé une solution qui fonctionne très bien pour moi

On 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 API
* effectuer des benchmarks de performances rapides
* abonnez-vous à des parties de l'état de votre application
* Afficher des messages similaires à la console.log
* suivre les erreurs globales avec traces de pile mappées à la source, y compris les traces de pile saga!
* envoyer des actions comme une expérience de contrôle de l'esprit gérée par le gouvernement
* hot swap é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