DevTools 다이제스트 - 탭 재정렬, 2의 콘솔 및 프레임워크 이벤트 리스너

폴 바카우스
폴 바카우스

가장 적합한 방식으로 DevTools 탭을 다시 정렬하세요. 프레임워크 이벤트가 바인딩된 정확한 위치를 확인하고 네트워크 요청을 차단하여 어떤 타사 스크립트로 인해 속도가 느려지는지 알아보세요.

패널 탐색 개선: 두 번째 콘솔, 탭 재정렬 및 멋진 밑줄

DevTools의 어느 영역이 가장 많이 사용되는지 조사한 결과, 전체 화면 콘솔 패널이 메인 탭 모음에서 마지막 위치에 배치될 자격이 없다는 것이 분명해졌습니다. 두 번째로 많이 사용되는 패널로 이제 두 번째 탭이 되었습니다. 모든 탭을 한 번에 표시할 수 없는 낮은 해상도에서는 특히 중요합니다.

하지만 보세요. 고전적인 순서는 근육 기억의 일부이므로 한동안 어지러울 것입니다. 어쩌면 전체 화면 콘솔을 싫어할 수도 있습니다. 걱정하지 마세요. YouTube에서 지원해 드립니다. 이제 다음과 같이 탭을 드래그하여 재정렬할 수 있습니다.

탭 표시줄의 변경사항은 유지되며 기본 탭과 확장 프로그램 제공 탭 모두에서 작동합니다. 또한 부드러운 애니메이션 밑줄을 추가했습니다. 우리는 그렇게 좋기 때문입니다.

프레임워크 이벤트 리스너 지원

jQuery와 같은 JS 프레임워크에서 생성된 이벤트는 종종 DevTools로 작업할 때 불편했습니다. 대부분의 프레임워크가 네이티브 DOM 이벤트를 맞춤 이벤트 API에 래핑하므로 이벤트 리스너를 보는 것만으로는 어떤 일이 일어나는지 실제로 알 수 없습니다.

프레임워크 리스너 사용 안함

하지만 Event Listener 탭의 새로운 'Framework Listeners'(프레임워크 리스너)에서는 DevTools가 프레임워크 래핑 부분을 인식하고 이를 자동으로 해결합니다. 이제 프레임워크에 의해 바인딩된 이벤트는 기본 이벤트와 완전히 동일하게 보이고 동작하여 실제로 바인딩된 위치를 알려줍니다.

프레임워크 리스너 사용

최고

  • 맞춤 객체 형식 지정 도구를 사용하면 CoffeeScript와 같은 트랜스파일된 언어가 DevTools 콘솔에서 객체의 형식을 더 잘 지정할 수 있습니다.
  • 기록 중에 상태, 시간, 버퍼 사용량을 한눈에 볼 수 있도록 타임라인의 대화상자가 새로워졌습니다.

    타임라인 힌트
  • 마찬가지로, 현재 비어 있는 경우 Network 패널에 유용한 힌트가 표시됩니다.

    네트워크 힌트
  • 이제 필터 입력을 사용하여 네트워크 패널에서 혼합 콘텐츠를 필터링하고 mixed-content:displayed로 설정할 수 있습니다.


언제나 그렇듯이 트위터를 통해 의견을 알려주시거나 아래 댓글을 통해 의견을 알려주시고 crbug.com/new에 버그를 제출해 주세요.

다음 달에 또 뵙겠습니다. 폴 바카우스 및 DevTools팀