Pozbądź się ostrzeżenia „Zdalny debugger jest na karcie w tle” w React Native

Rozpocząłem nowy projekt w React Native i wciąż otrzymuję następujące ostrzeżenie:

Zdalny debugger znajduje się na karcie w tle, co może powodować spowolnienie działania aplikacji. Napraw to, ustawiając kartę na pierwszym planie (lub otwierając ją w osobnym oknie).

To trochę denerwujące, więc chcę wiedzieć, jak się go pozbyć? Uruchamiam debugera w Chrome i przeniosłem go do osobnego okna, ale to nie pomogło.

Jeśli masz pole wyboru Zachowaj priorytet w oknie debugera, spróbuj je włączyć, zanim przejdziesz do któregokolwiek z poniższych rozwiązań.

Aby pozbyć się ostrzeżenia w całym projekcie, dodaj następujące elementy do swojego najbardziej zewnętrznego pliku JavaScript (w większości przypadków dotyczy to index.jsReact Native)

dla reaktywnych v0.63+:

Użyj LogBox: https://reactnative.dev/docs/debugging#logbox

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

dla reaktywnych v0.57 - v0.62:

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

Odnieś się do tego z oficjalnej dokumentacji React Native:

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

reagować natywnie v0.56 lub poniżej:

Dodaj następujące elementy na początku swojego kodu:

console.ignoredYellowBox = ['Remote debugger'];

Łatwe, proste i specyficzne dla tego błędu. Pracuje dla mnie. Może zastąpić dowolny tekst.

to rozwiązanie działa dla mnie

otwórz / przenieś http: // localhost: 8081 / debugger-ui (domyślna ścieżka do zdalnego debugowania) w osobnym oknie

może to mogłoby pomóc :)

Możesz użyć React Native Debugger dostępnego pod adresem https://github.com/jhen0409/react-native-debugger.Jest to samodzielna aplikacja do debugowania aplikacji React Native podczas programowania.

1. Przejdź http://localhost:*****/debugger-uido osobnego okna.
2. Uruchom ponownie Remote JS Debugging.

Dzieje się tak ze względu na liczbę zakładek otwieranych w przeglądarce z zakładką React Native Remote Debugger UI . Ja też stanąłem przed tym samym problemem.

Aby obejść ten komunikat ostrzegawczy, możesz użyć jednej z następujących metod:

• Otwórz kartę incognito, a następnie wklej http: // localhost: 8081 / debugger-ui na pasku adresu i naciśnij ENTER . Na koniec załaduj ponownie aplikację (Command + R) .

• Zamknij wszystkie karty w przeglądarce. Pozostaw tylko jedną otwartą kartę, a następnie naciśnij http: // locahost: 8081 / debugger-ui, a następnie ponownie załaduj aplikację (Command + R) .

Jak wspomniał @jakeforaker w jednym z komentarzy. Ostrzeżenie zniknęło, po prostu otwierając zdalny debuger w osobnym oknie zamiast karty w istniejącym oknie przeglądarki (musisz jednak ponownie załadować symulator).

Jak mówi ostrzeżenie, trzymanie zdalnego debugera w tym samym oknie co inne karty

może powodować spowolnienie działania aplikacji

Więc myślę, że po prostu tłumienie ostrzeżenia, o którym wspomniał @kjonsson: - console.ignoredYellowBox = ['Remote debugger'];nie wydaje się być najlepszym rozwiązaniem.

Ten problem został rozwiązany, gdy zamknąłem wszystkie otwarte okna Chrome i ponownie uruchomiłem usuwanie debugowania. Wcześniej miałem otwarte okna Chrome, więc „wydaje się”, że ich otwarcie zabija wydajność.

Od tego zobowiązania w marcu 2017 r. Możesz zaznaczyć pole wyboru Zachowaj priorytet . Po włączeniu dyskretnie odtwarza .wavplik zakodowany w standardzie base64 , aby zapobiec wejściu karty przeglądarki debugera w tryb niskiego poboru mocy, co może wpłynąć na wydajność gniazda internetowego. Zapobiegnie to skutecznie opisywanemu ostrzeżeniu.

Myślę, że zaakceptowana odpowiedź nie jest już dokładna (przynajmniej dla React Native v0.57 +).

Prawidłowy kod to teraz:

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

Odnieś się do tego z oficjalnej dokumentacji React Native:

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

Jestem na Macbooku. Naprawiłem ten problem, umieszczając okno Debuggera na głównym pulpicie, zamiast umieszczać je na oddzielnym pulpicie, który według niego znajduje się w „tle”.

Wczoraj pojawił się ten sam problem. Googlowanie doprowadziło do tego postu Stack Overflow . W jednej z odpowiedzi (autorstwa adriansprod) zasugerował:

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

Prawdopodobnie Twój debugger React Native nie znajduje się w swoim własnym oknie przeglądarki Chrome, ale na karcie przeglądarki Chrome. Wyciągnięcie go jako własnego okna, jak sugeruje adriansprod, naprawiło to dla mnie.

Obsługiwany jest (bardzo denerwujący) komunikat o błędzie debuggerWorker.js, który niestety nie zawiera żadnych opcji konfiguracyjnych, aby wyłączyć komunikat. Na razie nie ma więc możliwości skonfigurowania aplikacji w celu wyłączenia wiadomości.

Powiązany kod przedstawiono poniżej (obowiązuje oryginalna licencja ):

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

Jak widać, żadne opcje konfiguracyjne nie są używane, całość jest lokalnie ograniczona (zobacz powyższy link repo po dalsze szczegóły).

Z tym samym problemem spotkałem się około tydzień temu iw końcu znalazłem rozwiązanie, które działa doskonale dla mnie

Nazywa się reaktotronem, możesz go znaleźć tutaj - https://github.com/reactotron/reactotron i możesz go użyć do:
* przeglądania stanu aplikacji
* wyświetlania żądań i odpowiedzi API
* wykonywania szybkich testów wydajności
* subskrybowania części stan aplikacji
* wyświetlaj komunikaty podobne do console.log
* śledź globalne błędy za pomocą śladów stosu mapowanych na źródła, w tym śladów stosu sagi!
* wysyłaj akcje, takie jak rządowy eksperyment kontroli umysłu
* zmieniaj stan aplikacji na gorąco
* śledź sagi

Mam nadzieję, że mój post był pomocny i nigdy nie spotkasz się z tym żmudnym ostrzeżeniem.

Powodzenia

Używam tego w index.js

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

Zminimalizowałem okno „ http: // localhost: 8081 / debugger-ui / ”. Otwarcie go (anulowanie minimalizacji) i ponowne załadowanie aplikacji spowodowało usunięcie ostrzeżenia.

mogą istnieć szanse, że inny debugger jest już połączony z programem pakującym. więc zamknij terminal i debuger Google Chrome.

jeśli używasz menedżera pakietów programu Visual Studio, nie uruchamiaj menedżera pakietów za pomocą polecenia terminala Mac / innego systemu operacyjnego.

więc zamknij cały terminal i przestań przechodzić do menedżera pakietów i debuggera Google Chrome. rozpocząć proces ponownie.