Entfernen Sie die Warnung "Remote-Debugger befindet sich in einem Hintergrundregister" in React Native

Ich habe ein neues React Native-Projekt gestartet und erhalte immer wieder die folgende Warnung:

Der Remote-Debugger befindet sich auf einer Registerkarte im Hintergrund, wodurch Apps möglicherweise nur langsam ausgeführt werden. Beheben Sie dies, indem Sie die Registerkarte in den Vordergrund stellen (oder in einem separaten Fenster öffnen).

Es ist ein bisschen nervig, also möchte ich wissen, wie ich es loswerden kann? Ich führe den Debugger in Chrome aus und habe ihn in ein separates Fenster verschoben, aber es hat nicht geholfen.

Um die Warnung in Ihrem gesamten Projekt zu entfernen, fügen Sie Ihrer äußersten Javascript-Datei Folgendes hinzu (meistens index.jsfür React Native).

für reaktionsnativ v0.57+:

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

Verweisen Sie in den offiziellen React Native-Dokumenten darauf:

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

reaktionsnativ v0.56 oder darunter:

Fügen Sie Folgendes frühzeitig in Ihren Code ein:

console.ignoredYellowBox = ['Remote debugger'];

Einfach, einfach und spezifisch für diesen Fehler. Funktioniert bei mir. Kann jeden gewünschten Text ersetzen.

Diese Lösung ist Arbeit für mich

Öffnen / Verschieben von http: // localhost: 8081 / debugger-ui (Standardpfad für Remote-Debugging) im separaten Fenster

vielleicht könnte das helfen :)

Sie können den React Native Debugger verwenden, der unter https://github.com/jhen0409/react-native-debugger verfügbar ist. Es handelt sich um eine eigenständige App zum Debuggen von React Native-Apps während der Entwicklung.

1. Bewegen Sie sich http://localhost:*****/debugger-uiin das separate Fenster.
2. Neustart Remote JS Debugging.

Dies liegt an der Anzahl der Registerkarten, die im Browser mit der Registerkarte React Native Remote Debugger UI geöffnet werden . Ich stand auch vor dem gleichen Problem.

Um diese Warnmeldung zu überwinden, können Sie eine der folgenden Methoden verwenden:

• Öffnen Sie eine Inkognito-Registerkarte, fügen Sie http: // localhost: 8081 / debugger-ui in die Adressleiste ein und drücken Sie die EINGABETASTE . Laden Sie zum Schluss die App neu (Befehl + R) .

• Schließen Sie alle Registerkarten im Browser. Lassen Sie nur 1 Tab geöffnet und klicken Sie auf http: // locahost: 8081 / debugger-ui. Laden Sie dann die App neu (Befehl + R) .

Wie von @jakeforaker in einem der Kommentare erwähnt. Die Warnung wurde durch einfaches Öffnen des Remote-Debuggers in einem separaten Fenster anstelle einer Registerkarte in Ihrem vorhandenen Fenster Ihres Browsers behoben (Sie müssen Ihren Simulator jedoch neu laden).

Wie die Warnung besagt, bleibt der Remote-Debugger im selben Fenster wie andere Registerkarten

kann dazu führen, dass Apps langsam arbeiten

Ich denke also, einfach die Warnung zu unterdrücken, wie von @kjonsson erwähnt: - console.ignoredYellowBox = ['Remote debugger'];scheint nicht die beste Lösung zu sein.

Dieses Problem wurde behoben, als ich alle geöffneten Chrome-Fenster schloss und das Debugging entfernen erneut startete. Ich hatte zuvor geöffnete Chrome-Fenster, daher scheint es, dass das Öffnen die Leistung beeinträchtigt.

Seit diesem Commit im März 2017 können Sie das Kontrollkästchen Priorität beibehalten aktivieren . Wenn diese Option aktiviert ist, wird stillschweigend eine Base64-codierte .wavDatei abgespielt, um zu verhindern, dass die Browser-Registerkarte des Debuggers in den Energiesparmodus wechselt, was die Leistung des Websockets beeinträchtigen kann. Dadurch wird die von Ihnen beschriebene Warnung wirksam verhindert.

Ich denke, die akzeptierte Antwort ist nicht mehr korrekt (zumindest für React Native v0.57 +).

Der richtige Code lautet jetzt:

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

Verweisen Sie in den offiziellen React Native-Dokumenten darauf:

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

Ich bin auf Macbook. Ich habe dieses Problem behoben, indem ich das Debugger-Fenster auf den Hauptdesktop gebracht habe, anstatt es auf einem separaten Desktop zu haben, von dem es glaubt, dass er sich im "Hintergrund" befindet.

Ich hatte gestern das gleiche Problem. Das Googeln führte zu diesem Stapelüberlauf- Beitrag . In einer der Antworten (von adriansprod) schlug er vor:

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

Es ist wahrscheinlich, dass sich Ihr React Native-Debugger nicht in einem eigenen Chrome-Browserfenster befindet, sondern in einem Chrome-Browser-Tab. Das Herausziehen als eigenes Fenster, wie adriansprod vorschlägt, hat dies für mich behoben.

Die (sehr ärgerliche) Fehlermeldung wird von behandelt debuggerWorker.js, die leider keine Konfigurationsoptionen zum Ausschalten der Meldung enthält. Derzeit gibt es keine Möglichkeiten, Ihre Anwendung so zu konfigurieren, dass die Nachricht deaktiviert wird.

Der zugehörige Code ist unten aufgeführt (es gilt die ursprüngliche Lizenz ):

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

Wie Sie sehen, werden keine Konfigurationsoptionen verwendet, das Ganze wird lokal abgegrenzt (siehe den obigen Repo-Link für weitere Details).

Ich habe mich vor ungefähr einer Woche auch mit dem gleichen Problem konfrontiert und schließlich eine Lösung gefunden, die für mich hervorragend funktioniert

Es heißt Reaktotron. Sie finden es hier - https://github.com/reactotron/reactotron. Sie können es verwenden, um:
* Ihren Anwendungsstatus anzuzeigen
* API-Anforderungen und -Antworten anzuzeigen
* schnelle Leistungsbenchmarks durchzuführen
* Teile Ihrer zu abonnieren Anwendungsstatus
* Meldungen ähnlich wie console.log anzeigen
* Globale Fehler mit quellenzugeordneten Stapelspuren verfolgen, einschließlich Saga-Stapelspuren!
* Versandaktionen wie ein von der Regierung durchgeführtes Mind-Control-Experiment
* Hot-Swap-Status Ihrer App
* Verfolgen Sie Ihre Sagen

Ich hoffe, mein Beitrag war hilfreich und Sie werden nie mit dieser langweiligen Warnung konfrontiert.

Viel Glück

Ich benutze dies in index.js

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

Ich hatte das Fenster " http: // localhost: 8081 / debugger-ui / " minimiert . Durch einfaches Öffnen (Minimieren) und erneutes Laden der App wurde die Warnung entfernt.

Möglicherweise besteht die Möglichkeit, dass ein anderer Debugger bereits mit dem Packager verbunden ist. Schließen Sie also Ihr Terminal und debuggen Sie Google Chrome.

Wenn Sie den Paketmanager von Visual Studio verwenden, starten Sie den Paketmanager nicht mit dem Befehl Mac / other os terminal.

Schließen Sie also alle Terminals und fahren Sie mit dem Paketmanager und dem Google Chrome-Debugger fort. Starten Sie den Vorgang erneut.