안녕. 나는 같은 문제를 가지고있다. 이 정보가 유용 할 수 있습니다.
1) SPA의 일부 "페이지"( P1 )를 연 다음 DevTools를 열면 "Components"및 "Profiler"탭이 표시되지 않습니다.
2) DevTools를 닫습니다.
3) 그런 다음 SPA의 다른 "페이지"로 전환합니다 ( P2 ).
4) P2 에있는 동안 DevTools를 엽니 다.
5) 이제 "Components"및 "Profiler"탭이 표시됩니다.
6) DevTools를 닫지 않고 P1 로 다시 전환합니다. RDT-extension의 두 탭은 여전히 ​​여기에 있습니다. 이익 :)

@ Roman-Popov 이것을 안정적으로 재현 할 수 있습니까? p1과 p2가 무엇인지가 중요합니까? (앱에 대해 중요한 것이 있으면 어떻게 든 저와 공유하여 재현 할 수 있습니까?)

또한 어떤 브라우저 + OS

@ Roman-Popov @bengry (또는 이것을보고 재현 할 수있는 다른 사람) 재현 할 수 있다면 문제가 계속 발생하는지 확인하기 위해 DevTools의 새로운 빌드 (여기에서 공유 할 수 있음)를 시도해 보시겠습니까?

# 18860을 제거하여 빌드를 만들 수 있습니다. (이것은 원격으로 의심스러워 보이는 4.6-> 4.7 변경 세트의 유일한 커밋입니다.)

@bvaughn p1 및 p2 정보. 네, 차이가있는 것 같습니다. RDT가 기본적으로 표시되지 않는 P2는 훨씬 더 많은 dom- 요소를 포함합니다. 그리고 여기에 한 가지 더 자세한 정보가 있습니다. Redux-devtools 탭은 RDT 탭과 똑같이 작동합니다.

https://reactjs.org/ 페이지 (@bengry가 언급 한 문제)는 어떻습니까? 저도 봤습니다. 하지만 지금 다시 확인했는데 문제가 보이지 않습니다. 탭이 표시되고 모든 것이 정상입니다.

아마도 내 경우에는 내 프로젝트 또는 이와 비슷한 메모리 문제가 있습니다. P2에서 긴 목록을 제거하면 devtools 탭이 표시되기 때문입니다.

Chrome v83.0.4103.61
Chrome Canary v85.0.4157.0
Win 10 Pro 1903

@ Roman-Popov 추가 된 정보에 감사드립니다!

무슨 일이 일어나고 있는지 볼 수 있도록 재현 (또는 액세스)을 저와 공유 할 수 있습니까?

또는 여기에 첨부하면 일회용 devtools 빌드를 기꺼이 설치할 수 있습니까? ( 여전히 재현 할 수 있는지 확인하기 위해)

SPA에서 동일한 문제가 발생했습니다. 모바일 "보기"(초기 구성 요소 렌더링을 변경 함)에서 앱을 검사 할 때 Chrome Dev Tools에 구성 요소 및 프로필러 탭이 표시되도록 할 수있었습니다. 새로 고침하고 다시 데스크톱 / 반응 형 "보기"(개발 도구가 항상 열림)로 변경하여 탭이 계속 표시되었습니다.

SPA의 경우 모바일과 데스크톱 랜딩 페이지의 가장 큰 차이점은 데스크톱에서 반응 가상화 된 목록이있는 서랍을 렌더링한다는 것입니다. 이 서랍은 모바일에서 즉시 열리거나 렌더링되지 않습니다. 이 정보가 도움이되는지 잘 모르겠습니다. 단지 탐색 경로 일뿐입니다. 다른 것을 찾으면 업데이트하겠습니다.

문제가 해결되는지 확인하기 위해 사용자 지정 빌드를 시도해 보시기 바랍니다.

P2에서 긴 목록을 제거하면 devtools 탭이 표시되기 때문입니다.

네! 반응 가상화. 이전 메시지에서 언급 한 긴 목록에도 사용합니다.
overscanRowCount={600} 이 래핑 된 목록으로 설정됩니다. 충분히 크지 만 몇 개의 dom 요소가있는 매우 가벼운 자리 표시 자만 있습니다 (ctrl + f를 눌러 목록을 검색하는 브라우저를 유지하기 위해). overscanRowCount 을 + -50으로 다운 그레이드하면 탭 누락 문제가 사라집니다.

흥미 롭군. 그래서 문제가 나무의 크기 나 한 부모의 자식 수와 관련이있는 것처럼 들립니다 ... @ Roman-Popov 우연히 코드 샌드 박스 나 다른 곳에서 이것을 재현 할 수 있습니까? (P2를 직접 볼 수 없기 때문에 추측합니까?)

하지만 다른 뉴스에서는 overscanRowCount={600} 예상치 못하게 매우 높은 것 같습니다. 나는 그 값이 한 자리 숫자 이상이라고 조언하지 않았을 것입니다. RV 및 RW는 긴 목록 생성 및 작업을 피하기 위해 존재합니다. 600은 뷰포트 행과 1,200 개의 추가 행을 렌더링 함을 의미합니다.

reactjs.org도 react-virtualized 를 사용하나요? 문제가 저를 위해 재현 되었기 때문에 (사실이 문제는이를 예로 들어 열었습니다). 우리는 앱에서 사용하지만 오버 스캔 횟수가 더 적고 여전히 발생했습니다.

reactjs.org도 react-virtualized 를 사용하나요? 거기에서도 문제가 재현 되었기 때문에

reactjs.org에서 잘 작동합니다.

자체 앱에서는 반응 가상화를 사용하지 않지만 문제를 재현 할 수 있습니다.

편집 : create-react-app에서 만든 새로운 반응 앱에서 동일한 문제가 있습니다.

나는 이것이 Chrome 83과 관련이 있다고 생각합니다. 83으로 업그레이드 한 후이 문제가 발생하기 시작했으며 Chrome Canary 85에서 재현 할 수 있습니다.

Chromium 81을 사용하는 동료는 동일한 앱을 사용하는 데 문제가 없습니다.

뿡뿡

overscanRowCount = {600}이 ... 예기치 않게 높은 것 같습니다.
....
RV 및 RW는 긴 목록 생성 및 작업을 피하기 위해 존재합니다.

사실 : DI는 성능에 대해 알고 있습니다. 좋지는 않았지만 빠른 해결책이었습니다. 나중에 나는 물론 어떤 종류의 사용자 정의 검색을 수행합니다. :)
내 앱을 보여주고 재생산을 시도하는 소스 코드에 대해-죄송합니다. 그렇게 할 수 없다고 생각합니다. NDA 등등. 하지만 react-virtualized 목록, 무거운 페이지 등으로 작은 CRA 프로젝트를 만들 수 있습니다.이 버그를 다시 발견하면 해당 저장소를 공유합니다. 이 조사에 시간을 내도록 노력하겠습니다)

나는 이것이 Chrome 83과 관련이 있다고 생각합니다. 83으로 업그레이드 한 후이 문제가 발생하기 시작했으며 Chrome Canary 85에서 재현 할 수 있습니다.

Chromium 81을 사용하는 동료는 동일한 앱을 사용하는 데 문제가 없습니다.

이것은 확인하는 데 정말 유용한 정보가 될 것입니다. @ianvieira 이 문제를 얼마나 안정적으로 재현 할 수 있습니까? 매우 안정적이라면 이전 Chromium 버전을 사용 해보고 더 이상 재현되지 않는지 확인해 주시겠습니까?

그렇다면 알려 주시면 Chrome 팀에 연락하겠습니다.

다른 사람이이 문제를 꽤 안정적으로 재현 할 수 있다면 추가로 한 가지만 시도해보세요.이 확장 빌드를 사용해보고 도움이되는지 알려주시겠습니까?

ReactDevTools.zip

실제로 기대하지는 않지만 최근 WebPack 변경 사항을 배제하고 싶습니다.

위의 확장을 설치하려면 :

1. 그것을 다운로드하고 어딘가에 압축을 풉니 다.
2. 브라우저에서 chrome://extensions/ 열기
3. React DevTools 확장을 비활성화하려면 작은 토글을 클릭하십시오.
4. "Load Unpacked"버튼 클릭
5. 1 단계에서 압축이 풀린 확장 폴더를 선택합니다.

@bvaughn 나는 그것을 일관되게 재현 할 수 있다고 생각했지만 https://reactjs.org (탭이 올바르게 표시됨)로 이동하고 콘솔을 연 상태로 내 애플리케이션으로 돌아 가면 이제는 일관되게 작동합니다.

Chrome Canary에서는 여러 노드가있는 내 앱에서 일관되게 재현 할 수 있습니다. 보내 주신 버전을 사용해 보겠습니다.

나는 이것이 내 다른 모든 확장 추가 콘솔 탭도 죽이는 것처럼 보인다는 것을 알았습니다. Redux 등

나는 이것이 내 다른 모든 확장 추가 콘솔 탭도 죽이는 것처럼 보인다는 것을 알았습니다. Redux 등

나는 이것이 Chrome과 관련이 있다고 의심하기 시작했습니다.

다른 사람들로부터 Relay DevTools가 충돌하여 React DevTools가 중단된다는보고를 들었습니다. 이제 이것이 Redux DevTools에도 영향을 미친다고 말하는 것을보고 있습니다.

React (또는 Relay)가 서로 영향을 주거나 Redux 확장을 수행해야하는 것은 없습니다.

나는 이것이 내 다른 모든 확장 추가 콘솔 탭도 죽이는 것처럼 보인다는 것을 알았습니다. Redux 등

나는 똑같이 느꼈다. 방금 Chrome Canary에서 시도했지만 https://reactjs.org로 이동 한 후 React 탭이 다른 사용자와 함께 나타납니다.

나는 전에 https : // localhost : 3000 (개발 도구를 열고 닫는 데 성공하지 못함)과 https://farfetch.com으로 시도했습니다 https://reactjs.org로 다시 나타 났고 Farfetch와 React 사이의 Dev Tools를 닫고 페이지를 새로 고친 후에 다시 나타났습니다.

오 btw, @bvaughn을 보낸 버전을 사용하고있었습니다.

어떤 이유로 든 Canary의 https://reactjs.org 에서만 탭을 볼 수 있습니다. Localhost는 그것이없는 스틸입니다 (반응뿐만 아니라 모두). Dev 도구가 열린 상태에서 React 문서를 연 후 localhost를 열었 기 때문에 안정적인 탭이 있다고 생각합니다.

나는 똑같이하려고했지만 Chrome Canary에서 일관되게 localhost에서 가질 수 없습니다.

편집 : 브라우저 탭을 닫은 후 안정된 React 문서에 액세스하면 탭이 다시 누락됩니다. 정말 Chrome 문제인 것 같습니다.

이 문제는 결정적이지 않습니다. 때로는 작동하지만 때로는 작동하지 않습니다. 나는 우리가 하나의 성공 으로 너무 많이 읽어야한다고 생각하지 않는다.

Chrome v83은 React DevTools v4.7 이후 하루에 출시되었습니다.

누군가가 변경 사항이 있는지 확인하기 위해 시도하고 싶다면 React DevTools (4.6)의 이전 버전이 있습니다.
ReactDevTools-4.6.zip

내가 듣는 것에서 점점 Chrome 문제처럼 들립니다.

실험 버전이나 4.6 모두 저에게 적합하지 않습니다 (위에 언급 된 해결 방법 만 해당). 또한 며칠 전에 Canary를 업데이트 한 후 버그가 발생하여 그 이후로 지속되기 때문에 이것이 Chrome 문제라는 느낌이 들지만 확장 프로그램은 Stable에서 올바르게 작동합니다.

또한 reactjs.org 항상 확장 탭이 표시되지와 가끔 문제가 있었다 협조 할 수있다. 이유는 모르겠지만 가끔 실패하면 새로운 것이 없습니다. 새로운 것처럼 보이는 것은이 오류의 빈도와 다른 사이트에서 발생하고 있다는 사실, 그리고 다른 확장에서도 발생하는 것처럼 보인다는 사실입니다. (이것이 Chrome / Chromium 문제라고 생각하는 이유입니다)

확장 기능이 어떻게 작동하는지 전혀 모르고 축소 된 테스트 케이스도 만들 수 없습니다. 그러나 이것은 어떤 식 으로든 도움이 될 수 있습니다.

확장이 작동하는 reactjs.org에서 window 객체에는 __REACT_DEVTOOLS_COMPONENT_FILTERS__ , __REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ 및 __REACT_DEVTOOLS_GLOBAL_HOOK__ 있습니다.

후자는 다음과 같습니다.

확장 프로그램이 작동하지 않는 앱에는 __REACT_DEVTOOLS_GLOBAL_HOOK__ 존재하며 다음과 같습니다.

잠재적 인 오류를 찾기 위해 확장 프로그램 ( main.js ?)에 연결하거나 디버거를 연결하는 방법이 있습니까? (나는 background.js 시도했지만 이것은 올바른 위치가 아닌 것 같습니다.)

@bvaughn 나는 또한 이것이 Chromium 버그 일 수 있다고 생각합니다 (Edge에서 똑같은 버그가 발생하기 때문에 Chrome이 아니라 Chromium에 유의하십시오). Opera는 가장 최근의 RDT에서 잘 작동하므로 아직 Chromium 83으로 업데이트하지 않은 것 같습니다 (지금은 확인하기 위해 계산되지는 않았지만).

RDT로 전달되는 것 같기 때문에 여기에서 버그를 열었으므로 (Relay 및 Redux DT와 같은 다른 기능이 작동하지 않는지 몰랐습니다) 둘 사이의 통합이있을 수 있습니다. 문제를 일으키고 Chromium 83에서 변경된 확장 API 일 수 있습니다.

앞서 언급했듯이 이에 대해 Chromium / Chrome 팀에 문의하셨습니까?

이 시점에서 Chromium 버그 (최근 Chrome 83 및 Edge 83 업데이트와 함께 출시됨) 일 가능성이 있다는 데 동의했습니다.

Twitter에서 개발자 관련 정보 중 하나를 핑했지만 아직 답변을 듣지 못했습니다.

잠재적 인 오류를 찾기 위해 확장 (main.js?)에 연결하거나 디버거를 연결하는 방법이 있습니까? (나는 background.js를 시도했지만 이것은 올바른 위치가 아닌 것 같습니다.)

@maxbeier 확장을 디버깅하는 방법에는 두 가지가 있습니다. 일부 확장 프로그램은보고있는 페이지에 코드를 삽입합니다 (React DevTools와 마찬가지로).이 경우 정상적인 작업 흐름을 사용하여 디버그 할 수 있습니다.

확장 UI 자체를 디버깅 할 수도 있습니다. DevTools 패널을 분리 / 분리하고 두 번째 DevTools 창을 열어서 첫 번째 창을 검사합니다 (예 : ⌘ + J ).

확장 프로그램 (chrome : // extensions /? id = aogeonfmjfclepddhjhilmncnhooehhl)을 열고 '세부 정보'및 '보기 검사'를 선택할 수도 있습니다.

그건 그렇고, 이것은 Vue 및 Redux DevTools에도 영향을 미치는 Chromium 문제로 보입니다.

CR 버그 계정이있는 경우 다음 문제에 별표를 표시해보세요.
https://bugs.chromium.org/p/chromium/issues/detail?id=1085215

이것이 당신이 찾고있는 답인지 확실하지 않지만 Urql Devtools에서 우리는 이와 같은 예측 불가능 성 때문에 핸드 쉐이킹에 유리하게 chrome.devtools.inspectedWindow.eval 를 사용하지 않으려 고 노력했습니다.

검사 된 창을 평가할 때의 문제는 react devtools의 경우처럼 경쟁 조건이나 폴링에 대한 종속성으로 끝날 수 있다는 것입니다.

const loadCheckInterval = setInterval(function() {
  createPanelIfReactLoaded();
}, 1000);

나는 버그를 재현 할 수 없었지만 크롬이 익스텐션에서 인터벌 호출로 펑키 한 일을하고 있다면 놀라지 않을 것입니다. 재미는 없지만 핸드 쉐이킹은 일을 좀 더 간단하게 만들 수 있습니다. 저는 메시징이 보안상의 이유로 윈도우 평가에 대해 크롬 문서가 권장하는 것임을 알고 있습니다.

흥미로운 제안입니다, @andyrichardson. 감사합니다!

ChroPath에 대해서도 동일한 문제에 직면하고 있습니다.
나는 아직 영구적 인 해결책을 얻지 못했지만 여기에 해결 방법이 있습니다.

1. 필요한 경우에만 크롬 DevTools 테마를 변경하십시오.
2. 이제 devtools를 열면 DevTools에서 확장 탭을 찾을 수 있습니다.
3. 유지하려는 테마를 다시 변경하면 문제가 해결됩니다.

감사합니다, @sanjayautonomiq ,이 작업은 나를 위해

이것은 크롬에서 1 년 넘게 저에게 일어나고 있습니다. 일반적으로 페이지를 다시로드하면 구성 요소와 프로파일 러 탭이 다시 나타납니다. 그냥 최신 버전이 아니라 v16 이후로도 계속해서 나왔음을 지적하고 싶었습니다.

이것은 크롬에서 1 년 넘게 저에게 일어나고 있습니다. 일반적으로 페이지를 다시로드하면 구성 요소와 프로파일 러 탭이 다시 나타납니다. 그냥 최신 버전이 아니라 v16 이후로도 계속해서 나왔음을 지적하고 싶었습니다.

저는 개인적으로 작년 AFAIR에서 이것을 보지 못 하였기 때문에 그것은 당신의 입장에서 무언가 일 수 있다고 생각합니다. 그리고 언급했듯이 이것은 이것을 작성하는 시점에 최신 Opera에서 발생하지 않습니다 (Opera 68, Chromium 81). 페이지를 새로 고쳐도 도움이되지 않습니다. @sanjayautonomiq 가 제안한 해결 방법 은하지만 그렇습니다 .
이 버그가 최소 1 년 동안 존재 했더라도 최근 몇 주 동안 문제가 더 악화되었습니다 (새로운 Chromium 및 / 또는 새로운 RDT 버전).이 문제의 모든 반응에서 알 수 있습니다.

이 버그가 최소 1 년 동안 존재 했더라도 최근 몇 주 동안 문제가 더 악화되었습니다 (새로운 Chromium 및 / 또는 새로운 RDT 버전).이 문제의 모든 반응에서 알 수 있습니다.

물론 사실입니다. CR 버그를 다시 핑했습니다. 이 회귀는 매우 파괴적입니다.

참고로, 방금 http://crbug.com/1085215 를 . 후자의 문제에 대한 수정 사항이 ~ 8 일 전에 제출되었습니다. Canary에서 다시 테스트하고 문제가 해결되지 않은 경우 1085215 중복을 제거하십시오.

실제로 Canary 수정이이 문제를 해결하는 것처럼 보입니까 (또는 적어도 재현하기가 훨씬 더 어려워집니다). 이미 많은 중복 보고서를 받고 있기 때문에 수정 사항이 Chrome 안정 버전으로 롤링 될 때까지이 문제를 열어 둡니다.

ChroPath에 대해서도 동일한 문제에 직면하고 있습니다.
나는 아직 영구적 인 해결책을 얻지 못했지만 여기에 해결 방법이 있습니다.

1. 필요한 경우에만 크롬 DevTools 테마를 변경하십시오.
2. 이제 devtools를 열면 DevTools에서 확장 탭을 찾을 수 있습니다.
3. 유지하려는 테마를 다시 변경하면 문제가 해결됩니다.

나에게 매력처럼 일 했어, 고마워! 벽에 머리를 부딪 히려고했습니다.

너무 이상 해요.

이 문제를 해결하려면 devTools 테마를 변경해야합니다.

감사합니다, @sanjayautonomiq

그러나 이것은 버그입니다.

그러나 이것은 버그입니다.

예.

특히 문제 설명에서 언급 한대로 Chrome 버그 (

이 문제는 이제 Chrome 안정 버전에서 해결 된 것으로 보이므로이 문제를 종료하겠습니다.

이 문제는 이제 Chrome 안정 버전에서 해결 된 것으로 보이므로이 문제를 종료하겠습니다.

여전히 Chrome 83.0.4103.116에서 나를 위해 재현합니다.

나는 이것이 RDT 측에 수정 사항이 없다는 데 동의하지만 이것이 Chrome에서 수정 될 때까지이 문제를 열어 둘 가치가있을 수 있습니다.

동일한 문제 버전 83.0.4103.116 (공식 빌드) (64 비트)

나는 차임하고 그것이 나에게도 문제라고 말할 것이다 (버전 83.0.4103.116).

안녕하세요 여러분. 이것은 Chromium 버그이기 때문에 여기에 "+1"주석을 더 추가 할 가치가 없을 것입니다. 확장 측면에서 내가 할 수있는 일은 아무것도 없습니다. "+1"표는 Chromium 버그 자체에 쓰는 것이 더 낫습니다. Google은 그것이 많은 사람들에게 영향을 미친다는 것을 알 수 있도록합니다.

즉, CR 버그는 수정 된 것으로 표시되었으며이 댓글에 따라 Chrome v84에 체리를 선택하도록 예정되어 있으므로 모두가 곧 해결 될 것입니다.

그 동안에 이미 위에 댓글을 단 모든 사람에게 알림 스팸을 보내는 것을 방지하기 위해이 문제를 잠글 것입니다.