Ho avviato un nuovo progetto React Native e continuo a ricevere il seguente avviso:
Il debugger remoto si trova in una scheda in background che potrebbe rallentare le prestazioni delle app. Risolvi il problema mettendo in primo piano la scheda (o aprendola in una finestra separata).
È un po 'fastidioso, quindi voglio sapere come posso sbarazzarmene? Sto eseguendo il debugger in Chrome e l'ho spostato in una finestra separata ma non ha aiutato.
LogBox.ignoreLogs(['Remote debugger']);dareact-native
Risposte:
Per eliminare l'avviso nell'intero progetto, aggiungi quanto segue al tuo file Javascript più esterno (il più delle volte è index.jsper React Native)
per React-Native v0.57+:
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Remote debugger']);
Fai riferimento a questo dai documenti ufficiali di React Native:
https://facebook.github.io/react-native/docs/debugging.html
nativo di reazione v0.56 o inferiore:
Aggiungi quanto segue all'inizio del codice:
console.ignoredYellowBox = ['Remote debugger'];
Facile, semplice e specifico per quell'errore. Per me va bene. Può sostituire qualsiasi testo tu voglia.
index.js. Funziona come un fascino. if (__DEV__) { console.ignoredYellowBox = ['Remote debugger']; }
[eslint] '__DEV__' is not defined. (no-undef). Capisci anche tu?
YellowBox.ignoreWarnings(['Remote debugger', 'Require cycles']);ma entrambi gli avvisi continuano a essere visualizzati nella finestra della mia console. Sto usando la versione 0.61.4 di RN. Per favore
questa soluzione è un lavoro per me
apri / sposta http: // localhost: 8081 / debugger-ui (percorso predefinito per il debug remoto) nella finestra separata
forse questo potrebbe aiutare :)
Puoi usare React Native Debugger disponibile su https://github.com/jhen0409/react-native-debugger È un'app standalone per il debug delle app React Native durante lo sviluppo.
console.ignoredYellowBox = ['Remote debugger'];
http://localhost:*****/debugger-uisulla finestra separata.Remote JS Debugging.È a causa del numero di schede aperte nel browser con la scheda React Native Remote Debugger UI . Ho anche affrontato lo stesso problema.
Per superare questo messaggio di avviso è possibile utilizzare uno qualsiasi dei metodi seguenti:
Apri una scheda di navigazione in incognito, quindi incolla http: // localhost: 8081 / debugger-ui sulla barra degli indirizzi e premi INVIO . Infine ricarica l'app (Comando + R) .
Chiudi tutte le schede nel browser. Tieni aperta solo 1 scheda, quindi premi http: // locahost: 8081 / debugger-ui, quindi ricarica l'app (Comando + R) .
Come accennato da @jakeforaker in uno dei commenti. L'avviso è scomparso semplicemente aprendo il debugger remoto in una finestra separata invece che in una scheda nella finestra esistente del browser (devi ricaricare il simulatore però).
Come dice l'avviso, mantenere il debugger remoto nella stessa finestra delle altre schede
potrebbe rallentare l'esecuzione delle app
Quindi penso che semplicemente sopprimere l'avviso come menzionato da @kjonsson: - non console.ignoredYellowBox = ['Remote debugger'];sembra essere la soluzione migliore.
Dal momento che questo commit nel marzo 2017, è possibile abilitare la casella di controllo Mantieni priorità . Quando è abilitato, riproduce silenziosamente un .wavfile con codifica base64 per impedire alla scheda del browser del debugger di entrare in modalità a basso consumo, che può influire sulle prestazioni del websocket. Ciò impedirà efficacemente l'avviso che descrivi.
Penso che la risposta accettata non sia più accurata (almeno per React Native v0.57 +).
Il codice corretto ora è:
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Remote debugger']);
Fai riferimento a questo dai documenti ufficiali di React Native:
Sono su Macbook. Ho risolto questo problema portando la finestra Debugger sul desktop principale, invece di averla su un desktop separato che pensa sia in "Sfondo".
Ho avuto lo stesso problema ieri. Google ha portato a questo post di Stack Overflow . In una delle risposte (di adriansprod), ha suggerito:
Chrome debugger in it's own window fixes. But annoying problem
È probabile che il tuo debugger React Native non si trovi nella sua finestra del browser Chrome ma in una scheda del browser Chrome. Tirarlo fuori come una finestra, come suggerisce adriansprod, ha risolto il problema per me.
Il messaggio di errore (molto fastidioso) viene gestito da debuggerWorker.js, che purtroppo non include alcuna opzione di configurazione per disattivare il messaggio. Quindi per il momento non ci sono modi per configurare l'applicazione per disabilitare il messaggio.
Il codice correlato è descritto di seguito (si applica la licenza originale ):
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).'
);
};
})();
Come puoi vedere, non vengono utilizzate opzioni di configurazione, il tutto è limitato localmente (vedi il link repo sopra per ulteriori dettagli).
Ho anche affrontato lo stesso problema circa una settimana fa e finalmente ho trovato una soluzione che funziona in modo eccellente per me
Si chiama reactotron, puoi trovarlo qui - https://github.com/reactotron/reactotron e puoi usarlo per:
* visualizzare lo stato della tua applicazione
* mostrare richieste e risposte API
* eseguire benchmark rapidi delle prestazioni
* iscriverti a parti del tuo stato dell'applicazione
* visualizza messaggi simili a console.log
* traccia gli errori globali con tracce dello stack mappate alla sorgente, incluse le tracce dello stack di saga!
* invia azioni come un esperimento di controllo mentale gestito dal governo
* sostituisci a caldo lo stato della tua app
* segui le tue saghe
Spero che il mio post sia stato utile e non dovrai mai affrontare questo noioso avvertimento.
In bocca al lupo
Lo uso in index.js
if (__DEV__) {
console.ignoredYellowBox = [
'Remote debugger',
'Warning: isMounted… is deprecated',
'Module RCTImageLoader'
];
}
import { AppRegistry, YellowBox } from 'react-native';
0.57.4?
Avevo ridotto a icona la finestra " http: // localhost: 8081 / debugger-ui / ". Basta aprirlo (rimpicciolendolo) e ricaricare l'app ha rimosso l'avviso.
ci potrebbero essere possibilità che un altro debugger sia già connesso a packager. quindi chiudi il tuo terminale e debugger google chrome.
se stai usando il gestore di pacchetti di Visual Studio, non avviare il gestore di pacchetti con il comando del terminale Mac / altro sistema operativo.
quindi chiudi tutto il terminale e smetti di andare in gestione pacchetti e debugger di Google Chrome. riavviare il processo.