Избавьтесь от предупреждения «Удаленный отладчик находится на фоновой вкладке» в React Native

Я начал новый проект React Native и получаю следующее предупреждение:

Удаленный отладчик находится на фоновой вкладке, что может замедлить работу приложений. Исправьте это, переместив вкладку на передний план (или открыв ее в отдельном окне).

Это немного раздражает, поэтому я хочу знать, как от этого избавиться? Я запускаю отладчик в Chrome и переместил его в отдельное окно, но это не помогло.

Если у вас есть флажок « Сохранить приоритет» в окне отладчика, попробуйте включить его, прежде чем переходить к любому из решений ниже.

Чтобы избавиться от предупреждения во всем вашем проекте, добавьте следующее в ваш внешний файл Javascript (в большинстве случаев это index.jsдля React Native)

для нативной реакции v0.63+:

Используйте LogBox: https://reactnative.dev/docs/debugging#logbox

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

для нативной реакции v0.57 - v0.62:

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

Ссылка на это из официальных документов React Native:

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

react-native v0.56 или ниже:

Добавьте в код на раннем этапе следующее:

console.ignoredYellowBox = ['Remote debugger'];

Легко, просто и специфично для этой ошибки. Работает для меня. Можно заменить любой текст на ваш выбор.

это решение работает для меня

открыть / переместить http: // localhost: 8081 / debugger-ui (путь по умолчанию для удаленной отладки) в отдельном окне

может это может помочь :)

Вы можете использовать React Native Debugger, доступный по адресу https://github.com/jhen0409/react-native-debugger. Это автономное приложение для отладки приложений React Native во время разработки.

1. Перейти http://localhost:*****/debugger-uiв отдельное окно.
2. Перезагрузите Remote JS Debugging.

Это связано с тем, что в браузере открываются вкладки с вкладкой React Native Remote Debugger UI . Я тоже столкнулся с той же проблемой.

Чтобы преодолеть это предупреждающее сообщение, вы можете использовать любой из следующих методов:

• Откройте вкладку инкогнито, вставьте http: // localhost: 8081 / debugger-ui в адресную строку и нажмите ENTER . Наконец, перезагрузите приложение (Command + R) .

• Закройте все вкладки в браузере. Оставьте открытой только 1 вкладку, затем нажмите http: // locahost: 8081 / debugger-ui, затем перезагрузите приложение (Command + R) .

Как упомянул @jakeforaker в одном из комментариев. Предупреждение исчезло, просто открыв удаленный отладчик в отдельном окне вместо вкладки в существующем окне вашего браузера (хотя вам нужно перезагрузить симулятор).

Как говорится в предупреждении, удаленный отладчик должен находиться в том же окне, что и другие вкладки.

может вызвать медленную работу приложений

Поэтому я думаю, что просто подавление предупреждения, упомянутое @kjonsson: - console.ignoredYellowBox = ['Remote debugger'];не кажется лучшим решением.

Эта проблема была решена, когда я закрыл все открытые окна Chrome и снова запустил удаление отладки. Раньше у меня были открытые окна Chrome, поэтому кажется, что их открытие убивает производительность.

Поскольку эта фиксация была сделана в марте 2017 года, вы можете установить флажок Сохранить приоритет . Когда он включен, он автоматически воспроизводит .wavфайл в кодировке base64, чтобы предотвратить переход вкладки браузера отладчика в режим пониженного энергопотребления, который может повлиять на производительность веб-сокета. Это эффективно предотвратит появление описанного вами предупреждения.

Я думаю, что принятый ответ больше не точен (по крайней мере, для React Native v0.57 +).

Теперь правильный код:

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

Ссылка на это из официальных документов React Native:

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

Я использую Macbook. Я исправил эту проблему, перенеся окно отладчика на главный рабочий стол, а не на отдельном рабочем столе, который, по его мнению, находится в «Фоновом».

Вчера у меня была такая же проблема. Поиск в Google привел к этому сообщению о переполнении стека . В одном из ответов (от adriansprod) он предложил:

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

Вероятно, ваш отладчик React Native находится не в собственном окне браузера Chrome, а на вкладке браузера Chrome. Вытащив его как отдельное окно, как предлагает adriansprod, я решил эту проблему.

Сообщение об ошибке (очень раздражающее) обрабатывается debuggerWorker.js , к сожалению, не включает никаких параметров конфигурации для отключения сообщения. Так что на данный момент нет способов настроить приложение для отключения сообщения.

Соответствующий код приведен ниже ( применяется исходная лицензия ):

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

Как видите, никакие параметры конфигурации не используются, все это ограничено локально (см. Приведенную выше ссылку репо для получения дополнительной информации).

Я также столкнулся с той же проблемой около недели назад, и, наконец, я нашел решение, которое отлично работает для меня.

Он называется reactotron, вы можете найти его здесь - https://github.com/reactotron/reactotron, и вы можете использовать его для:
* просмотра состояния вашего приложения
* отображения запросов и ответов API
* выполнения быстрых тестов производительности
* подписки на части вашего приложения состояние приложения
* отображение сообщений, аналогичных console.log
* отслеживание глобальных ошибок с помощью трассировок стека с отображением источника, включая трассировки стека саги!
* отправка действий, таких как правительственный эксперимент по контролю над разумом
* горячая замена состояния вашего приложения
* отслеживание ваших саг

Надеюсь, мой пост был полезен, и вы никогда не столкнетесь с этим утомительным предупреждением.

Удачи

Я использую это в index.js

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

Я свернул окно « http: // localhost: 8081 / debugger-ui / ». Просто открыв его (не свернув) и перезагрузив приложение, вы удалили предупреждение.

есть вероятность, что другой отладчик уже подключен к упаковщику. так что закройте свой терминал и отладчик Google Chrome.

Если вы используете диспетчер пакетов Visual Studio, не запускайте диспетчер пакетов с помощью команды терминала Mac / другой ОС.

поэтому закройте весь терминал и прекратите работу с менеджером пакетов и отладчиком Google Chrome. начать процесс снова.