React Native에서 "Remote debugger is in a background tab"경고 제거

React Native에서 "Remote debugger is in a background tab"경고 제거

---

새로운 React Native 프로젝트를 시작했는데 다음과 같은 경고가 계속 표시됩니다.

원격 디버거가 백그라운드 탭에있어 앱이 느리게 수행 될 수 있습니다. 탭을 포 그라운드 (또는 별도의 창에서 열어)하여이 문제를 해결하십시오.

좀 짜증나서 어떻게 제거 할 수 있는지 알고 싶어요? Chrome에서 디버거를 실행 중이며 별도의 창으로 이동했지만 도움이되지 않았습니다.

---

전체 프로젝트에서 경고를 제거하려면 가장 바깥 쪽 Javascript 파일에 다음을 추가 하십시오 (대부분 index.jsReact 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 (원격 디버깅을위한 기본 경로) 열기 / 이동

아마 도움이 될 수 있습니다 :)

---

https://github.com/jhen0409/react-native-debugger 에서 제공되는 React Native Debugger를 사용할 수 있습니다 . 개발 중 React Native 앱을 디버깅하기위한 독립형 앱입니다.

---

1. http://localhost:*****/debugger-ui별도의 창으로 이동 합니다.
2. 다시 시작하십시오 Remote JS Debugging.

---

이 문제는 열려있는 모든 Chrome 창을 닫고 디버깅 제거를 다시 시작하면 해결되었습니다. 이전에 Chrome 창을 열었 기 때문에 열어두면 성능이 저하되는 것 같습니다.

---

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'];최선의 해결책이 아닌 것 같습니다.

---

나는 받아 들여지는 대답이 더 이상 정확하지 않다고 생각합니다 (적어도 React Native v0.57 +의 경우).

이제 올바른 코드는 다음과 같습니다.

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

공식 React Native 문서에서 이것을 참조하십시오.

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

---

2017 년 3 월 에이 커밋 이후 우선 순위 유지 확인란을 활성화 할 수 있습니다 . 활성화되면 base64로 인코딩 된 파일을 자동으로 재생 .wav하여 디버거의 브라우저 탭이 저전력 모드로 전환되는 것을 방지하여 websocket 성능에 영향을 줄 수 있습니다. 이렇게하면 설명하는 경고를 효과적으로 방지 할 수 있습니다.

---

어제 같은 문제가 나타났습니다. 인터넷 검색은이 Stack Overflow 게시물로 이어졌습니다 . (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).'
    );
  };
})();

보시다시피 구성 옵션이 사용되지 않으며 전체 범위가 로컬로 지정됩니다 (자세한 내용은 위의 repo 링크 참조).

---

나는 또한 약 1 주일 전에 같은 문제에 직면했으며 마침내 나에게 탁월한 솔루션을 찾았습니다.

reactotron이라는 이름으로 여기에서 찾을 수 있습니다.- https ://github.com/reactotron/reactotron에서 찾을 수 있습니다.
* 애플리케이션 상태보기
* API 요청 및 응답 표시
* 빠른 성능 벤치 마크 수행
* 일부 구독 애플리케이션 상태
* console.log와 유사한 메시지 표시
* saga 스택 추적을 포함한 소스 매핑 스택 추적으로 전역 오류 추적!
* 정부가 운영하는 마인드 컨트롤 실험과 같은 디스패치 액션
* 앱 상태 핫스왑
* 사가 추적

내 게시물이 도움이 되었기를 바라며이 지루한 경고에 직면하지 않을 것입니다.

행운을 빕니다

---

나는 이것을 사용한다 index.js

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

---

저는 Macbook을 사용하고 있습니다. 디버거 창을 "배경"에 있다고 생각되는 별도의 데스크톱에 두지 않고 주 데스크톱에 가져 와서이 문제를 해결했습니다.

참고 URL : https://stackoverflow.com/questions/41146446/get-rid-of-remote-debugger-is-in-a-background-tab-warning-in-react-native