React-devtools: 모든 노드 확장

에 만든 2016년 03월 18일 · 3코멘트 · 출처: facebook/react-devtools

기본적으로 개발 도구는 모든 것을 축소합니다. 그리고 계속해서 하나씩 확장해야 하는 번거로움도 있고, 다 확장할 방법도 없습니다.

매우 지루하기 때문에 실제로 무언가를 놓치고 있을 수 있으며, 문제에 대한 예비 검색에서 그와 관련된 결과가 나오지 않는다는 사실에 놀랐습니다.

표시된 노드에 대해 "모두 확장"과 자동 확장 옵션을 고려하십시오. 때로는 자동 확장을 원하고 때로는 범위에 있는 트리 및 루트 노드의 크기에 의존하지 않습니다. 따라서 자동 확장 기능이 있으면 큰 도움이 됩니다.

출처

prasannavl

👍2

가장 유용한 댓글

@spicyj 는 다음

큰 나무가 있는 페이지(예: Facebook)에서는 쉽게 엄청나게 커질 수 있기 때문에 이 작업을 계획하지 않을 것입니다.

이것이 어리석은 질문이라면(저는 React를 처음 접합니다), 원래 포스터가 이미 제안하지 않았거나 적어도 큰 나무가 있는 페이지에서 성능 문제를 피하면서 이 기능을 구현하는 방법을 암시 하지 않았다면 용서해 주십시오. 그는 말했다 :

[...] 자동 확장 옵션도 고려하십시오. 때로는 자동 확장을 원하고 때로는 범위에 있는 트리 및 루트 노드의 크기에 의존하지 않습니다.

따라서 간단한 솔루션은 트리가 자동 확장이 허용 가능한 성능으로 작동하기에 충분히 작은지 여부에 따라 사용 설명서에서 활성화 또는 비활성화하는 옵션이 될 것입니다. 물론, 사용자는 작은 나무가 있는 사이트에 대해 이 기능을 활성화한 다음 큰 나무가 있는 다른 사이트로 전환하여 브라우저(또는 적어도 탭)가 중단되도록 할 수 있습니다. 그러나 이것에 대해 방어하는 것은 꽤 쉽지 않을까요? 결합할 수도 있는 몇 가지 접근 방식을 생각할 수 있습니다.

자동 확장 기능을 최대 깊이로 제한합니다. (좋아, 얕고 매우 넓은 나무가 있는 경우 항상 작동하지는 않습니다.)
자동 확장 기능을 최대 총 노드 수로 제한합니다. 노드 자동 확장으로 인해 표시되는 노드의 총 수가 해당 임계값을 초과하는 경우 자동 확장을 중지하기만 하면 됩니다.
자동 확장 기능을 상위 항목당 최대 노드 수로 제한합니다. (위와 유사하지만 노드당 제한이 있습니다.)
고정된 시간 임계값 내에서 가능한 한 많은 노드를 자동 확장합니다.

이 기능을 구현할 수 있는지 다시 생각해 볼 수 있다면 좋을 것입니다. 접힌 루트 구성 요소만 보여주는 기본 보기는 실제로 그다지 유용하지 않기 때문입니다. 비교를 위해 기본적으로 요소 탭의 트리가 자동으로 확장되므로 루트 <html> 요소가 확장될 뿐만 아니라 <body> 아래의 최상위 수준도 표시됩니다.

Elements 패널에서 노드를 선택하고 React 패널로 전환하면 해당 구성 요소가 자동으로 강조 표시됩니다.

감사합니다, 이것은 매우 유용한 팁입니다! 그러나 페이지를 다시 로드할 때마다 요소 탭으로 전환하고 다시 React로 전환해야 하는 것은 여전히 매우 불편합니다(개발 중에 매우 자주 발생함).

aspiers 에 2017년 03월 25일

👍5

모든 3 댓글

큰 나무가 있는 페이지(예: Facebook)에서는 쉽게 엄청나게 커질 수 있기 때문에 이 작업을 계획하지 않을 것입니다. Elements 패널에서 노드를 선택하고 React 패널로 전환하면 해당 구성 요소가 자동으로 강조 표시됩니다.

도움이 되기를 바랍니다!

sophiebits 에 2016년 03월 31일

@spicyj 는 다음

큰 나무가 있는 페이지(예: Facebook)에서는 쉽게 엄청나게 커질 수 있기 때문에 이 작업을 계획하지 않을 것입니다.

[...] 자동 확장 옵션도 고려하십시오. 때로는 자동 확장을 원하고 때로는 범위에 있는 트리 및 루트 노드의 크기에 의존하지 않습니다.

자동 확장 기능을 최대 깊이로 제한합니다. (좋아, 얕고 매우 넓은 나무가 있는 경우 항상 작동하지는 않습니다.)
자동 확장 기능을 최대 총 노드 수로 제한합니다. 노드 자동 확장으로 인해 표시되는 노드의 총 수가 해당 임계값을 초과하는 경우 자동 확장을 중지하기만 하면 됩니다.
자동 확장 기능을 상위 항목당 최대 노드 수로 제한합니다. (위와 유사하지만 노드당 제한이 있습니다.)
고정된 시간 임계값 내에서 가능한 한 많은 노드를 자동 확장합니다.

Elements 패널에서 노드를 선택하고 React 패널로 전환하면 해당 구성 요소가 자동으로 강조 표시됩니다.

aspiers 에 2017년 03월 25일

👍5

이 모든 확장 기능은 다음과 같이 구현 및 병합되었습니다.
https://github.com/facebook/react-devtools/issues/591
https://github.com/facebook/react-devtools/pull/621
키:
모두 확장하려면 Alt+오른쪽 화살표
모두 축소하려면 Alt+왼쪽 화살표

RobBednark 에 2018년 09월 26일

👍2

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

React-devtools: 모든 노드 확장

가장 유용한 댓글

모든 3 댓글

관련 문제