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

88

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

원격 디버거가 백그라운드 탭에있어 앱이 느리게 수행 될 수 있습니다. 탭을 포 그라운드로 설정하거나 별도의 창에서 열어이 문제를 해결하세요.

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

react-native 
— mxmtsk
소스
이것을 읽는 다른 사람들에게 필요한 것은 이러한 경고를 무시하는 대신 더 빠른 디버거라고 생각합니다. 사용에 @varunvs 의해 답변을 아래의 반응 - 네이티브 디버거가 경고를 제거하고 장치의 출력 시간을 단축
— 바이 니스 프라
3
정답 ( 아래 )은 이제 디버거 페이지에서 "우선 순위 유지"확인란을 선택하는 것입니다.
— orome
react-native v0.63.0 사용 LogBox.ignoreLogs(['Remote debugger']);이후react-native
— Anton Novik

답변:

150

당신이있는 경우 유지 보수 우선 순위 디버거 창에서 체크 박스를, 아래의 솔루션 중 하나에 점프하기 전에 수 있도록하려고합니다.

전체 프로젝트에서 경고를 제거하려면 가장 바깥 쪽 Javascript 파일에 다음을 추가 하십시오 (대부분 index.jsReact 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

반응 네이티브 v0.56 이하 :

코드 초기에 다음을 추가하십시오.

console.ignoredYellowBox = ['Remote debugger'];

쉽고 간단하며 해당 오류에만 해당됩니다. 나를 위해 작동합니다. 원하는 텍스트를 대체 할 수 있습니다.

— Kjonsson
소스
내 AppRegistry.registerComponent 문 바로 전에 이것을 추가했으며 작동했습니다! 감사합니다
— İlter 케이건 OCAL
1
이 코드를 최상위 index.js. 매력처럼 작동합니다. if (__DEV__) { console.ignoredYellowBox = ['Remote debugger']; }
— Mike S.
@MikeS. 경고를 받았습니다 [eslint] '__DEV__' is not defined. (no-undef). 당신도 그것을 얻습니까?
— anticafe
@anticafe 아니요, 경고가 표시되지 않습니다. 그래서 문제가 무엇인지 잘 모르겠습니다.
— Mike S.
안녕하세요, 사용하고 YellowBox.ignoreWarnings(['Remote debugger', 'Require cycles']);있지만 두 경고가 여전히 콘솔 창에 나타납니다. 0.61.4 버전의 RN을 사용하고 있습니다. 도와주세요
— 아차 나 샤르마
39

이 솔루션은 나를 위해 일합니다

별도의 창 에서 http : // localhost : 8081 / debugger-ui (원격 디버깅을위한 기본 경로) 열기 / 이동

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

— Anztrax
소스
5
탭을 37 개의 탭으로 구성된 일반 그룹에서 자체 창으로 이동하면됩니다. 감사합니다
— jakeforaker 18-02-09
네, 작동합니다. 그러나 누구든지 그 이유를 말할 수 있습니까?
— 란잔
24

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

— Varunvs
소스
3
감사합니다. 꼭 시도해 보겠습니다 만, 경고를 해결하지 못하기 때문에 제가 답을 찾고있는 것은 아닙니다. 나는 이상하게 같은 컴퓨터의 다른 RN 앱에 대한 경고를하지 않습니다
— mxmtsk
1
비슷한 문제가 있었지만 React Native 디버거를 사용하여 해결했습니다.
— varunvs
그것은 자신의 창 나를 위해 모든 시간을 경고 삭제되지 않습니다 년대 덕분에, 나는 디버거를 유지하는 등이 솔루션에 들어갑니다
— mxmtsk
2
경고를 제거하기 위해 다른 도구를 설치하는 것은 최선의 해결책이 아니며 다른 도구에는 자체 문제가 있습니다. 정답은 아래 kjonsson의 것입니다console.ignoredYellowBox = ['Remote debugger'];
— laurent
1
@ this.lau_ 경고를 숨기고 실제 문제를 해결하지 않습니까? 우리가 해결하려는 문제는 디버깅하는 동안 느린 앱 성능을 수정하는 것이라고 생각합니다. 경고를 강제로 숨기면 수정되지 않습니다.
— varunvs
8
  1. http://localhost:*****/debugger-ui별도의 창으로 이동 합니다.
  2. 다시 시작하십시오 Remote JS Debugging.
— 람잔 차시 고프
소스
6

React Native Remote Debugger UI 탭으로 브라우저에서 열리는 탭 수가 많기 때문입니다 . 나도 같은 문제에 직면했습니다.

이 경고 메시지를 극복하려면 다음 중 한 가지 방법을 사용할 수 있습니다.

— 히걸
소스
6

댓글 중 하나에서 @jakeforaker가 언급했듯이. 브라우저의 기존 창에있는 탭 대신 별도의 창에서 원격 디버거를 열면 경고가 사라졌습니다 (시뮬레이터를 다시로드해야 함).

경고는 원격 디버거를 다른 탭과 같은 창에 유지한다는 것입니다.

앱이 느리게 실행될 수 있습니다.

그래서 @kjonsson이 언급했듯이 단순히 경고를 억제한다고 생각합니다 .- console.ignoredYellowBox = ['Remote debugger'];최선의 해결책이 아닌 것 같습니다.

— Ashish Pisey
소스
5

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

— dnp
소스
5

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

— Aleclarson
소스
2

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

여기에 이미지 설명 입력

— Parth Chokshi
소스
0

어제 같은 문제가 나타났습니다. 인터넷 검색은이 Stack Overflow 게시물로 이어졌습니다 . (adriansprod의) 응답 중 하나에서 그는 다음과 같이 제안했습니다.

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

React Native 디버거가 자체 Chrome 브라우저 창이 아니라 Chrome 브라우저 탭에있을 가능성이 높습니다. adriansprod가 제안한 것처럼 자체 창으로 꺼내서이 문제를 해결했습니다.

— alee8
소스
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).'
    );
  };
})();

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

— 에 테리 테
소스
0

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

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

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

행운을 빕니다

— Probojnik
소스
0

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

if (__DEV__) {
  console.ignoredYellowBox = [
    'Remote debugger',
    'Warning: isMounted… is deprecated',
    'Module RCTImageLoader'
  ];
}
— 마이크 S.
소스
나는 또한 수입import { AppRegistry, YellowBox } from 'react-native';
— 마이크 S.을
새 앱에서 이것을 다시 테스트했지만 작동하지 않는 것 같습니다. 뭔가 변경되었는지 궁금 0.57.4하십니까?
— Mike S.
0

다른 디버거가 이미 packager에 연결되었을 가능성이 있습니다. 따라서 터미널과 디버거 Google 크롬을 닫으십시오.

Visual Studio의 패키지 관리자를 사용하는 경우 Mac / 다른 os 터미널 명령으로 패키지 관리자를 시작하지 마십시오.

따라서 모든 터미널을 닫고 패키지 관리자와 Google 크롬 디버거를 중지하십시오. 프로세스를 다시 시작하십시오.

— 디팍 싱
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.