Singkirkan peringatan "Remote debugger is in a background tab" di React Native

Saya telah memulai proyek React Native baru dan saya terus mendapatkan peringatan berikut:

Debugger jarak jauh ada di tab latar belakang yang dapat menyebabkan aplikasi berjalan lambat. Perbaiki ini dengan meletakkan tab di depan (atau membukanya di jendela terpisah).

Agak menjengkelkan jadi saya ingin tahu bagaimana saya bisa menyingkirkannya? Saya menjalankan debugger di Chrome dan saya memindahkannya ke jendela terpisah tetapi tidak membantu.

Jika Anda memiliki kotak centang Pertahankan Prioritas di jendela debugger, coba aktifkan sebelum Anda beralih ke salah satu solusi di bawah ini.

Untuk menghilangkan peringatan di seluruh proyek Anda, tambahkan yang berikut ini ke file Javascript terluar Anda (sebagian besar waktu itu index.jsuntuk React Native)

untuk react-native v0.63+:

Gunakan LogBox: https://reactnative.dev/docs/debugging#logbox

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

untuk react-native v0.57 - v0.62:

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

Referensi ini dari dokumen resmi React Native:

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

react-native v0.56 atau di bawah:

Tambahkan yang berikut ini di awal kode Anda:

console.ignoredYellowBox = ['Remote debugger'];

Mudah, sederhana dan khusus untuk kesalahan itu. Bekerja untuk saya. Dapat menggantikan teks yang Anda inginkan.

solusi ini berhasil untuk saya

buka / pindah http: // localhost: 8081 / debugger-ui (jalur default untuk debugging jarak jauh) di jendela terpisah

mungkin itu bisa membantu :)

Anda dapat menggunakan React Native Debugger yang tersedia di https://github.com/jhen0409/react-native-debugger Ini adalah aplikasi mandiri untuk men-debug aplikasi React Native selama pengembangan.

1. Pindah http://localhost:*****/debugger-uidi jendela terpisah.
2. Mulai ulang Remote JS Debugging.

Itu karena banyaknya tab yang dibuka di browser dengan tab React Native Remote Debugger UI . Saya juga menghadapi masalah yang sama.

Untuk mengatasi pesan peringatan ini, Anda dapat menggunakan salah satu metode dari berikut ini:

• Buka tab penyamaran lalu tempel http: // localhost: 8081 / debugger-ui di bilah alamat dan tekan ENTER . Terakhir, muat ulang aplikasi (Command + R) .

• Tutup semua tab di browser. Biarkan hanya 1 tab yang terbuka lalu tekan http: // locahost: 8081 / debugger-ui lalu muat ulang aplikasi (Command + R) .

Seperti yang disebutkan @jakeforaker di salah satu komentarnya. Peringatan itu hilang hanya dengan membuka debugger jarak jauh di jendela terpisah alih-alih tab di jendela yang ada di browser Anda (Anda harus memuat ulang simulator Anda).

Seperti peringatan yang mengatakan menjaga debugger jarak jauh di jendela yang sama dengan tab lain

dapat menyebabkan aplikasi berjalan lambat

Jadi saya pikir hanya menekan peringatan seperti yang disebutkan oleh @kjonsson: - console.ignoredYellowBox = ['Remote debugger'];sepertinya bukan solusi terbaik.

Masalah ini telah teratasi saat saya menutup semua jendela Chrome yang terbuka dan memulai lagi Hapus Debugging. Saya sebelumnya telah membuka jendela Chrome, jadi tampaknya 'membukanya' membunuh kinerja.

Sejak pengubahan ini pada Maret 2017, Anda dapat mengaktifkan kotak centang Pertahankan Prioritas . Saat diaktifkan, ini akan memutar file berenkode base64 secara diam - diam.wav untuk mencegah tab browser debugger memasuki mode daya rendah, yang dapat memengaruhi kinerja websocket. Ini secara efektif akan mencegah peringatan yang Anda jelaskan.

Saya pikir jawaban yang diterima tidak lagi akurat (setidaknya untuk React Native v0.57 +).

Kode yang benar sekarang:

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

Referensi ini dari dokumen resmi React Native:

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

Saya menggunakan Macbook. Saya memperbaiki masalah ini dengan menghadirkan jendela Debugger di desktop utama, daripada menyimpannya di desktop terpisah yang menurutnya ada di "Latar Belakang".

Saya mengalami masalah yang sama muncul kemarin. Googling itu mengarah ke pos Stack Overflow ini . Dalam salah satu tanggapannya (oleh adriansprod), dia menyarankan:

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

Kemungkinan debugger React Native Anda tidak ada di jendela browser Chrome-nya sendiri, tetapi di tab browser Chrome. Menariknya keluar sebagai jendelanya sendiri, seperti yang disarankan adriansprod, memperbaiki ini untukku.

Pesan kesalahan (sangat mengganggu) ditangani oleh debuggerWorker.js , yang sayangnya tidak menyertakan opsi konfigurasi apa pun untuk mematikan pesan. Jadi untuk saat ini tidak ada cara Anda dapat mengkonfigurasi aplikasi Anda untuk menonaktifkan pesan tersebut.

Kode terkait diuraikan di bawah ini ( lisensi asli berlaku):

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

Seperti yang Anda lihat, tidak ada opsi konfigurasi yang digunakan, semuanya dibatasi secara lokal (lihat tautan repo di atas untuk detail lebih lanjut).

Saya juga pernah menghadapi masalah yang sama sekitar satu minggu yang lalu dan akhirnya saya menemukan solusi yang bekerja sangat baik untuk saya

Ini disebut reactotron, Anda dapat menemukannya di sini - https://github.com/reactotron/reactotron dan Anda dapat menggunakannya untuk:
* melihat status aplikasi Anda
* menunjukkan permintaan & tanggapan API
* melakukan tolok ukur kinerja cepat
* berlangganan bagian dari Anda status aplikasi
* menampilkan pesan yang mirip dengan console.log
* melacak kesalahan global dengan jejak tumpukan yang dipetakan sumber termasuk jejak tumpukan saga!
* Kirim tindakan seperti eksperimen mind control yang dijalankan pemerintah
* ubah status aplikasi Anda
* lacak kisah Anda

Saya harap posting saya bermanfaat dan Anda tidak akan pernah dihadapkan dengan peringatan yang membosankan ini.

Semoga berhasil

Saya menggunakan ini di index.js

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

Saya telah meminimalkan jendela " http: // localhost: 8081 / debugger-ui / ". Hanya membukanya (tidak meminimalkan), dan memuat ulang aplikasi menghapus peringatan.

mungkin ada kemungkinan bahwa debugger lain telah terhubung ke pengemas. jadi tutup terminal Anda dan debugger google chrome.

jika Anda menggunakan palungan paket studio visual maka jangan memulai manajer paket dengan Mac / perintah terminal os lain.

begitu tutup semua terminal dan berhenti menjalankan pengelola paket dan debugger google chrome. mulai prosesnya lagi.