React: 버그 : DevTools DOM 강조 표시가 장시간 마우스 오버 후 중단됨

이것을 트리거하는 더 쉬운 방법 :

1. 구성 요소 트리에서 요소를 선택하려면 클릭하십시오.
2. DevTools 외부로 마우스 이동
3. 위쪽 또는 아래쪽 화살표를 클릭합니다.

DevTools에서 다른 것에 집중할 때까지 하이라이트는 이제 "고정"됩니다.

TBH 이것은 내 마음에 예상되는 동작입니다. 왜냐하면 네이티브 요소가 호버링되거나 초점이 맞춰져있는 한 브라우저의 요소 패널이하는 일과 일치하기 때문입니다. ¹

원하는 경우 Tree 을 업데이트하여 몇 초 후에 자동 숨김을 활성화 할 수 있습니다.
https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-devtools-shared/src/devtools/views/Components/Tree.js#L207 -L223

... hideAfterTimeout: true 처럼 SelectedElement hideAfterTimeout: true 도 전달합니다 ...
https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js#L75 -L89

¹ 둘 사이의 작지만 중요한 차이점 중 하나는 기본 요소 패널이 마우스 아웃시 "고정 된"강조 표시를 남기지 않는 것 같습니다. 전체 개발자 도구 범위를 벗어나는 마우스를 더 안정적으로 감지하는 것일까 요? 어떻게 든 더 잘할 수 있을까요?

Firefox에서 강조 표시가 멈추지 않기 때문에 예상되는 동작 여부에 관계없이 Firefox와 Chrome 간의 동작이 일치하지 않습니다.

둘 사이의 작지만 중요한 차이점 중 하나는 기본 요소 패널이 마우스 아웃시 "고정 된"강조 표시를 남기지 않는 것 같습니다.

이해하지 못합니다. 이것이 제가 문제를 제기 한 내용입니다. :-) 그렇습니다. 중요한 차이점이라고 생각합니다. 나는 매일이 문제를 다루고있다.

... hideAfterTimeout도 전달하려면 : SelectedElement처럼 true ...

몇 초 후에 항상 강조 표시가 제거되는 것처럼 들립니다. 따라서이 문제는 해결되지만 다른 경우는 더 악화됩니다. 그것은 나에게 수용 가능한 해결책처럼 보이지 않습니다.

이상적으로, 내가 원하는 것은 DevTools 외부에 커서를 놓는 순간 강조 표시가 안정적으로 제거되는 것 입니다. 네이티브처럼.

"키보드를 계속 사용하면 어떨까요"와 같은 예외적 인 경우가 있다는 것을 이해하지만 항상 두드리지는 않습니다. 대조적으로,이 특정 버그 (로 마우스에 일관성 리셋 강조) 매일 여러 번 타격하고있다.

나는 여기서 30 분을 보냈고 왜 이벤트가 시작되지 않는지에 대한 먼 생각조차하지 못했습니다. 트위터에 물어 보자. https://twitter.com/dan_abramov/status/1222178476817633282

나는 Twitter 에서 이것을 언급했지만 devtools 소스를 통해 마우스 움직임을 처리하고 DOM 요소를 강조하는 방법을 파악했습니다.

hover 상태가 _onmousemove 핸들러에있는 devtools 업데이트의 주요 장소 인 것 같습니다. 이 함수는 흥미롭게도 다른 이벤트 핸들러가 참조하지 않는 _highlightTreeElement 를 차례로 호출합니다.

몇 가지 다른 메서드 ( _onfocusout , _onmouseleave , _ondragstart 및 _reset )는 이름에서 알 수 있듯이 SDK.OverlayModel.hideDOMNodeHighlight() 를 호출합니다. 메인 페이지에서 하이라이트.

편집 : itemData 의 현재 구현이 onMouseMove 및 onMouseLeave 에 바인딩되는 것처럼 보이기 때문에 다른 이벤트 처리기 집합을 호출하고 싶었습니다. devtools가 관찰하는 추가 이벤트는 드래그하거나 더 많은 포커스 변경 처리가 관심사 인 경우 상황을 좀 더 견고하게 만들 수도 있습니다.