DevTools Digest - 집계된 타임라인 세부정보, 색상 팔레트 등

이번 달은 Chrome Canary에 다양한 기능을 제공했습니다. 타임라인의 집계된 세부정보를 통해 사이트에서 성능 문제를 일으키는 서드 파티 스크립트, 새로운 색상 팔레트로 일관된 색상을 선택하는 방법, 맞춤설정 가능한 네트워크 프로필로 회의 Wi-Fi를 시뮬레이션하는 방법, 새로운 기본 메뉴더 나은 도움말을 통해 DevTools UI를 최대한 활용하는 방법을 알아보세요.


성능 비난 문제 해결: 타임라인에서 집계된 세부정보

타임라인의 집계된 세부정보

오늘날의 웹사이트에서는 점점 더 많은 비콘, 분석, 소셜, 폰트 로드 및 제3자의 광고 서비스를 사용하고 있으며, 때로는 너무 많이 사용하고 있습니다. 이런 일이 발생하지 않도록 하고 문제를 파악할 수 있도록 Google에서는 타임라인에 집계된 세부정보를 도입합니다.

집계 세부정보 탭에서는 비용이 많이 드는 함수나 전체 호출 트리에 집중한 다음 선택한 데이터를 도메인, 하위 도메인 또는 고유 URL별로 분류할 수 있습니다. 예를 들어 위의 페이지 로드 타임라인에서 이제 facebook.net 또는 twitter.com과 같은 도메인에서 유입되는 서드 파티 스크립트로 인해 속도가 느려진다고 판단할 수 있습니다.

새로운 전용 기본 메뉴

새로운 기본 메뉴

기본 툴바를 깔끔하게 만들기 위해 창, 설정, 고정 아이콘을 새로운 전용 기본 메뉴로 옮겼습니다.

특히 도킹이 훨씬 간단해졌습니다. 이전 아이콘을 길게 누르지 않고 도킹 위치마다 고유한 아이콘이 있습니다.

고정 외에도 빠른 액세스 파일 검색, 바로가기, 도움말(새 홈페이지로 연결됨)이 추가되었습니다.

개선된 도움말로 DevTools 살펴보기

새로운 도움말이 추가되었습니다.

DevTools에는 많은 버튼이 있으며, 모든 버튼이 자율적으로 설명되는 건 아닙니다. 이제 시스템 네이티브 도움말을 플랫폼에 일관된 커스텀 도움말로 대체하여 작업과 바로가기를 더 쉽게 검색할 수 있습니다.

새 도움말이 훨씬 빠르게 표시되며 단축키 (있는 경우)가 포함됩니다.

커스텀 네트워크 제한 프로필 만들기

커스텀 네트워크 프로필

네트워크 속도계의 기본 옵션이 사용 사례에 비해 너무 제한적이고, '컨퍼런스 Wi-Fi' 옵션이 필요하거나, 구식 버전인 '110Baud' 라인을 에뮬레이션하려는 경우 좋은 소식을 전해드립니다. 이러한 작업을 모두 수행할 수 있는 새로운 설정 패널이 추가되었습니다

자동, 머티리얼, 맞춤 색상 팔레트

마법의 색상을 다시 만들든 기존 색상 팔레트로 작업하든 개선된 색상 선택 도구를 사용하면 사이트에 일관된 색상 팔레트를 선택할 수 있습니다.

팔레트 옆에 있는 작은 전환기 아이콘을 클릭하여 다음 중에서 선택할 수 있습니다.

  1. 페이지 색상 — 이 팔레트는 CSS에서 찾은 색상을 사용하여 자동 생성되므로 기존 사이트를 확장하는 경우에 적합한 옵션입니다.
  2. Material DesignMaterial Design 팔레트는 즉시 사용할 수 있는 아름다운 색상을 제공하며 새 프로젝트를 시작할 때 이상적인 선택입니다. 현재는 기본 색상이 모두 표시되지만 곧 모든 음영이 제공될 예정입니다.
  3. 커스텀 - 자신만의 플레이그라운드입니다. 선택도구에서 원하는 색상을 선택하여 새 색상을 추가한 다음 팔레트 옆의 '더하기' 아이콘을 클릭합니다 이리저리 드래그하여 재정렬하고 마우스 오른쪽 버튼으로 클릭하여 삭제와 같은 추가 옵션을 표시합니다.

의견과 함께 색상 이야기를 더욱 확장할 수 있는 방법을 알려 주세요.

인기순

  • fetch() API를 사용한 요청이 이제 Network 패널에 표시됩니다.
  • 자동 패널 레이아웃을 사용하면 DevTools의 크기를 조절할 때
    패널이 새 공간 제약 조건에 맞춰 조정됩니다.
  • 요소 및 기기 검사에 새로운 아이콘 모음이 추가되었습니다.
  • 이제 노드가 강조 표시되더라도 DOM 패널의 속성 색상이 다르게 지정됩니다. (전부 모두 하얀색이었는데)
  • 이제 숨겨진 요소 (선택한 DOM 노드에서 'h'를 눌러 활성화됨)에 회색 원 표시기가 표시되고 DOM 중단점은 파란색 원으로 동일하게 표시됩니다. 이는 :hover와 같은 요소 상태를 강제 적용하기 위해 이미 있는 주황색 표시기와 유사합니다.

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

다음 달까지!
폴 바카우스 및 DevTools팀