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

88

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

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

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

react-native 
— mxmtsk
источник
Для других, читающих это, я думаю, что вам нужен более быстрый отладчик, а не игнорировать эти предупреждения. Ниже ответ @varunvs на использование response-native-debugger удаляет предупреждение и сокращает время вывода на ваше устройство
— Vineeth Pradhan
3
Правильный ответ ( ниже ) - теперь просто установить флажок «Сохранить приоритет» на странице отладчика.
— orome 07
с момента использования response-native v0.63.0 LogBox.ignoreLogs(['Remote debugger']);отreact-native
— Антон Новик

Ответы:

149

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

Чтобы избавиться от предупреждения во всем вашем проекте, добавьте следующее в ваш внешний файл 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'];

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

— Kjonsson
источник
Добавил это прямо перед моим оператором AppRegistry.registerComponent, и он сработал! Спасибо
— İlter Kaan Öcal
1
Я поместил этот код на свой верхний уровень index.js. Работает как шарм. if (__DEV__) { console.ignoredYellowBox = ['Remote debugger']; }
— Майк С.
@MikeS. Я получил предупреждение [eslint] '__DEV__' is not defined. (no-undef). Вы тоже это понимаете?
— антикафе 08
@anticafe Нет, я не получаю предупреждений. Так что я не уверен, в чем будет проблема.
— Майк С.
Привет, я использую, YellowBox.ignoreWarnings(['Remote debugger', 'Require cycles']);но оба предупреждения все еще появляются в моем окне консоли. Я использую версию RN 0.61.4. Пожалуйста, помогите
— Арчана Шарма
39

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

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

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

— Anztrax
источник
5
просто переместите вкладку из вашей обычной группы из 37 вкладок в собственное окно. спасибо
— jakeforaker
Ага, это работает. Но кто-нибудь может сказать мне, почему это так?
— Ranjan
24

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

— Varunvs
источник
3
Спасибо, я обязательно попробую, но это не совсем то, что я ищу в качестве ответа, потому что это не устраняет предупреждение. Как ни странно, я не получаю предупреждения о других приложениях RN на том же компьютере
— mxmtsk
1
У меня была аналогичная проблема, но использование отладчика React Native решило ее.
— varunvs
Спасибо, я выбрал это решение, поскольку сохранение отладчика в его собственных окнах не стирает для меня все время
— предупреждения
2
Установка другого инструмента только для удаления предупреждения - не лучшее решение, и у этого другого инструмента есть свои проблемы. Правильный ответ - ответ Кьонссона ниже -console.ignoredYellowBox = ['Remote debugger'];
— laurent
1
@ this.lau_ Разве это не просто скрывает предупреждение и не устраняет реальную проблему? Я считаю, что проблема, которую мы пытаемся решить, заключается в том, чтобы исправить низкую производительность приложения во время отладки. Принудительное скрытие предупреждения его не исправит.
— varunvs
6

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

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

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

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

— Hygull
источник
6

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

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

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

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

— Ашиш Писей
источник
5

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

— днп
источник
5

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

— Aleclarson
источник
2

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

введите описание изображения здесь

— Парт Чокши
источник
0

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

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

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

— алее8
источник
0

Сообщение об ошибке (очень раздражающее) обрабатывается 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).'
    );
  };
})();

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

— Etheryte
источник
0

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

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

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

Удачи

— Пробойник
источник
0

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

if (__DEV__) {
  console.ignoredYellowBox = [
    'Remote debugger',
    'Warning: isMounted… is deprecated',
    'Module RCTImageLoader'
  ];
}
— Майк С.
источник
Я также импортировалimport { AppRegistry, YellowBox } from 'react-native';
— Майк С.
Хотя я только что повторил это в новом приложении, и, похоже, оно не работает. Интересно, изменилось ли что-нибудь 0.57.4?
— Майк С.
0

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

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

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

— Дипак Сингх
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.