Позбудьтеся попередження "Віддалений налагоджувач знаходиться у фоновій вкладці" у React Native

Я розпочав новий проект React Native і постійно отримую таке попередження:

Віддалений налагоджувач знаходиться у фоновій вкладці, що може спричинити повільну роботу програм. Виправте це, виставивши вкладку на перший план (або відкривши її в окремому вікні).

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

Щоб позбутися попередження у всьому своєму проекті, додайте наступне у свій зовнішній файл Javascript (більшу частину часу це index.jsдля React Native)

для реакції-рідної v0.57+:

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

Посилання на це в офіційних документах React Native:

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

рідна реакція 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.

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

Щоб подолати це попереджувальне повідомлення, ви можете використовувати будь-який із наведених нижче способів:

• Відкрийте анонімну вкладку, вставте 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. Я вирішив цю проблему, встановивши вікно налагоджувача на головному робочому столі, а не на окремому робочому столі, яке, на його думку, знаходиться у "Фоні".

У мене вчора з’явилося те саме питання. Погугливши це призвело до цього повідомлення про переповнення стека . В одній із відповідей (від 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).'
    );
  };
})();

Як бачите, параметри конфігурації не використовуються, все це обмежується локально (докладнішу інформацію див. У наведеному вище посиланні на репо).

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

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

Сподіваюся, мій пост був корисним, і ви ніколи не зіткнетеся з цим нудним попередженням.

Удачі

Я використовую це в index.js

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

Я мінімізував вікно " http: // localhost: 8081 / debugger-ui / ". Просто відкривши його (скасувавши мінімізацію) та перезавантаживши програму, попередження видалилося.

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

якщо ви використовуєте менеджер пакунків Visual Studio, тоді не запускайте менеджер пакунків за допомогою команди терміналу Mac / other os.

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