React Native'de "Uzaktan hata ayıklayıcı arka planda bir sekmede" uyarısından kurtulun

Yeni bir React Native projesi başlattım ve şu uyarıyı almaya devam ediyorum:

Uzaktan hata ayıklayıcı, uygulamaların yavaş çalışmasına neden olabilecek bir arka plan sekmesindedir. Sekmeyi ön planlayarak (veya ayrı bir pencerede açarak) bunu düzeltin.

Biraz can sıkıcı, bu yüzden ondan nasıl kurtulabileceğimi bilmek istiyorum? Hata ayıklayıcıyı Chrome'da çalıştırıyorum ve onu ayrı bir pencereye taşıdım ancak yardımcı olmadı.

Hata ayıklayıcı penceresinde Önceliği Koru onay kutusu varsa, aşağıdaki çözümlerden herhangi birine geçmeden önce bunu etkinleştirmeyi deneyin.

Tüm projenizdeki uyarıdan kurtulmak için aşağıdakileri en dıştaki Javascript dosyanıza ekleyin (çoğu zaman index.jsReact Native içindir)

react-native için v0.63+:

Şunu kullanın LogBox: https://reactnative.dev/docs/debugging#logbox

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

react-native için v0.57 - v0.62:

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

Bunu resmi React Native belgelerinden referans alın:

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

react-native v0.56 veya aşağıda:

Aşağıdakileri kodunuza erkenden ekleyin:

console.ignoredYellowBox = ['Remote debugger'];

Kolay, basit ve bu hataya özgü. Benim için çalışıyor. İstediğiniz herhangi bir metnin yerini alabilir.

bu çözüm benim için çalışıyor

ayrı pencerede http: // localhost: 8081 / debugger-ui'yi (uzaktan hata ayıklama için varsayılan yol) açın / taşı

belki bu yardımcı olabilir :)

React Native Debugger'ı https://github.com/jhen0409/react-native-debugger adresinde kullanabilirsiniz . Geliştirme sırasında React Native uygulamalarında hata ayıklamak için bağımsız bir uygulamadır.

1. Taşı http://localhost:*****/debugger-uiayrı pencerede.
2. Yeniden başlatın Remote JS Debugging.

Bunun nedeni tarayıcıda React Native Remote Debugger UI sekmesi ile açılan sekmelerin sayısıdır . Ben de aynı sorunla karşılaştım.

Bu uyarı mesajının üstesinden gelmek için aşağıdakilerden herhangi birini kullanabilirsiniz:

• Gizli bir sekme açın, ardından http: // localhost: 8081 / debugger-ui'yi adres çubuğuna yapıştırın ve ENTER tuşuna basın . Son olarak uygulamayı yeniden yükleyin (Command + R) .

• Tarayıcıdaki tüm sekmeleri kapatın. Yalnızca 1 sekmeyi açık tutun ve http: // locahost: 8081 / debugger-ui'ye basın ve ardından uygulamayı yeniden yükleyin (Command + R) .

Yorumlardan birinde @ jakeforaker tarafından belirtildiği gibi. Uyarı, uzaktan hata ayıklayıcıyı tarayıcınızın mevcut penceresindeki bir sekme yerine ayrı bir pencerede açarak ortadan kalktı (yine de simülatörünüzü yeniden yüklemeniz gerekir).

Uyarı, uzak hata ayıklayıcıyı diğer sekmelerle aynı pencerede tuttuğunu söylediği için

uygulamaların yavaş çalışmasına neden olabilir

Bu yüzden, @ kjonsson tarafından belirtildiği gibi basitçe uyarıyı bastırmanın: - console.ignoredYellowBox = ['Remote debugger'];en iyi çözüm gibi görünmüyor.

Bu sorun, tüm açık Chrome pencerelerini kapattığımda ve Hata Ayıklamayı Kaldır'ı yeniden başlattığımda çözüldü. Daha önce Chrome pencerelerini açmıştım, bu yüzden onları açtırmak performansı düşürüyor 'görünüyor'.

Mart 2017'deki bu taahhütten bu yana , Önceliği Koru onay kutusunu etkinleştirebilirsiniz . Etkinleştirildiğinde, hata ayıklayıcının tarayıcı sekmesinin websocket performansını etkileyebilecek düşük güç moduna girmesini önlemek için bir base64 kodlu dosyayı sessizce oynatır .wav. Bu, tarif ettiğiniz uyarıyı etkili bir şekilde önleyecektir.

Kabul edilen cevabın artık doğru olmadığını düşünüyorum (en azından React Native v0.57 + için).

Doğru kod şimdi:

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

Bunu resmi React Native belgelerinden referans alın:

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

Macbook'tayım. Bu sorunu, "Arka Planda" olduğunu düşündüğü ayrı bir masaüstünde kullanmak yerine, Hata Ayıklayıcı penceresini ana masaüstüne getirerek çözdüm.

Dün aynı sorunu yaşadım. Googling, bu Stack Overflow gönderisine yol açtı . Yanıtlardan birinde (adriansprod tarafından) şunları önerdi:

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

React Native hata ayıklayıcınız muhtemelen kendi Chrome tarayıcı penceresinde değil, bir Chrome tarayıcı sekmesinde olabilir. Adriansprod'un önerdiği gibi, kendi penceresi olarak dışarı çekilmesi bunu benim için çözdü.

(Çok can sıkıcı) hata mesajı, debuggerWorker.jsne yazık ki mesajı kapatmak için herhangi bir yapılandırma seçeneği içermeyen tarafından ele alınır . Bu nedenle, şu an için uygulamanızı mesajı devre dışı bırakacak şekilde yapılandırmanın hiçbir yolu yoktur.

İlgili kod aşağıda özetlenmiştir ( orijinal lisans geçerlidir):

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

Gördüğünüz gibi, hiçbir yapılandırma seçeneği kullanılmıyor, her şey yerel olarak kapanıyor (daha fazla ayrıntı için yukarıdaki repo bağlantısına bakın).

Ayrıca yaklaşık bir hafta önce aynı sorunla karşılaştım ve sonunda benim için mükemmel çalışan bir çözüm buldum

Reactotron olarak adlandırılır, burada bulabilirsiniz - https://github.com/reactotron/reactotron ve bunu şu amaçlarla kullanabilirsiniz:
* uygulamanızın durumunu görüntülemek
* API isteklerini ve yanıtlarını göstermek
* hızlı performans karşılaştırmaları gerçekleştirmek
* uygulama durumu
* console.log
* 'a benzer mesajlar görüntüler, saga yığın izleri de dahil olmak üzere kaynak eşlemeli yığın izleri ile genel hataları izleyin!
* devlet tarafından yürütülen bir zihin kontrol deneyi gibi eylemler
gönderin
* uygulamanızın durumunu çalışırken değiştirin * efsanelerinizi izleyin

Umarım yazım yardımcı olmuştur ve bu sıkıcı uyarıyla asla karşılaşmayacaksınız.

İyi şanslar

Bunu içinde kullanıyorum index.js

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

" Http: // localhost: 8081 / debugger-ui / " penceresini küçülttüm . Sadece açmak (küçültmek) ve uygulamayı yeniden yüklemek uyarıyı kaldırdı.

Başka bir hata ayıklayıcının paketleyiciye zaten bağlı olma ihtimali olabilir. bu yüzden terminalinizi ve hata ayıklayıcı google chrome'u kapatın.

visual stüdyonun paket yöneticisini kullanıyorsanız, paket yöneticisini Mac / diğer os terminal komutuyla başlatmayın.

bu yüzden tüm terminalleri kapatın ve paket yöneticisi ve google chrome hata ayıklayıcıya geçmeyi bırakın. süreci yeniden başlatın.