Microsoft Edge DevTools는 3D 보기 도구를 개선하여 웹 개발 문제를 시각화합니다.

Microsoft는 개발자 도구의 일부인 3D 뷰어 도구에 대한 몇 가지 큰 개선 사항을 발표했습니다. 이 도구는 웹 개발자가 웹 사이트를 집합적으로 구성하는 여러 요소를 식별, 수정 및 개선하는 데 도움이 되는 몇 가지 성능 향상을 얻고 있습니다.

3D 보기 도구는 DOM 복잡성, 원치 않는 스크롤바 또는 z-색인 오버레이 문제와 같은 일반적인 웹 개발 문제를 시각화하고 해결하는 데 매우 유용한 것으로 입증되었습니다. 3D 보기 도구와 DevTools는 분명히 일반 웹 사용자를 위한 것이 아닙니다. 그러나 이미 개발 도구를 사용하고 있는 사용자는 새 기능 의 이점을 누릴 수 있다고 Microsoft는 확신했습니다.

3D 보기 도구는 항상 깊이 중첩된 컨테이너를 찾는 가장 빠른 방법 중 하나였습니다. 3D 보기 도구의 DOM 탭은 DOM 트리를 3차원으로 빠르게 표시하고 개발자가 페이지의 어느 부분에 래퍼가 너무 많은지 결정할 수 있도록 도와줍니다.

도구의 DOM 탭은 또한 개발자에게 전체 웹 페이지에 대한 개요를 제공하고 뷰포트 외부의 요소가 표시될 때까지 장면을 축소하고 이동할 수 있습니다. 요소 중 하나를 클릭하면 개발자가 요소 도구로 직접 이동할 수 있습니다.

Z-색인 스택 문제 디버깅:

3D 보기 도구에는 탐색이 더 쉽고 직관적인 Z-색인 탭이 있습니다. 이 도구를 사용하면 어떤 요소가 컨텍스트를 쌓고 있고 요소가 z-색인을 따라 어떻게 쌓이는지 확인할 수 있습니다. 이렇게 하면 일반적인 문제를 빠르게 찾는 데 도움이 될 수 있습니다.

그룹 레이어의 성능 문제 디버깅:

이 새로운 기능은 웹 페이지를 정확하거나 최적화된 레이어 수로 분할합니다. 이렇게 하면 특히 일부 구성 요소가 나머지 구성 요소와 독립적으로 애니메이션되거나 변경될 때 성능이 크게 향상됩니다.

Microsoft는 생성된 레이어를 감지하기 위해 새로운 “복합 레이어” 탭을 추가했습니다. 왼쪽의 사이드바는 레이어 목록을 보여주고 각 레이어 위에 마우스를 가져가면 3D 장면에서 강조 표시됩니다. 패널은 레이어를 렌더링하는 데 필요한 크기 및 메모리와 같은 레이어에 대한 중요한 정보를 강조 표시합니다.