Chrome Canary에서 기능이 풍부한 한 달이었습니다. 타임라인의 집계된 세부정보를 사용하여 사이트에서 성능 문제를 일으키는 서드 파티 스크립트를 알아보고, 새로운 색상 팔레트로 일관된 색상을 선택하는 방법, 맞춤설정 가능한 네트워크 프로필로 회의 Wi-Fi를 시뮬레이션하는 방법, 새로운 기본 메뉴 및 더 나은 도움말을 사용하여 DevTools UI를 최대한 활용하는 방법을 알아보세요.
성능 문제에 대한 더 나은 비난: 타임라인에 집계된 세부정보
오늘날 웹사이트에서는 점점 더 많은 서드 파티의 비콘, 분석, 소셜, 글꼴 로드, 광고 서비스를 사용하고 있으며, 경우에 따라 너무 많이 사용하기도 합니다. 이러한 일이 발생하지 않도록 하고 문제를 파악할 수 있도록 Google에서는 집계된 세부정보를 타임라인에 도입하고 있습니다.
집계된 세부정보 탭에서 비용이 많이 드는 함수 또는 전체 호출 트리에만 집중한 다음 선택한 데이터를 도메인, 하위 도메인 또는 고유한 URL별로 분류할 수 있습니다. 예를 들어 위의 페이지 로드 타임라인에서 이제 facebook.net 또는 twitter.com과 같은 도메인에서 발생하는 서드 파티 스크립트로 인한 속도 저하를 쉽게 파악할 수 있습니다.
전용 새 기본 메뉴
기본 툴바를 정리하기 위해 드로어, 설정, 도킹 아이콘을 전용 새 기본 메뉴로 이동했습니다.
특히 도킹이 훨씬 간편해졌습니다. 이전 아이콘을 길게 누를 필요 없이 각 도킹 위치에 자체 아이콘이 표시됩니다.
도킹 외에도 빠른 액세스 파일 검색, 단축키, 도움말(새로운 홈페이지로 연결)이 추가되었습니다.
개선된 도움말을 통해 DevTools 살펴보기
DevTools에는 많은 버튼이 있으며 그중 일부는 설명이 포함되어 있지 않습니다. 이제 시스템 기본 도움말을 플랫폼과 일관된 맞춤 도움말로 대체하여 작업과 작업의 단축어를 더 쉽게 찾을 수 있습니다.
새로운 도움말이 훨씬 더 빠르게 표시되며 단축키 (있는 경우)를 포함합니다.
맞춤 네트워크 제한 프로필 만들기
네트워크 제한기의 기본 옵션이 사용 사례에 너무 제한적이거나 '회의 Wi-Fi' 옵션이 필요하거나 향수를 불러일으키기 위해 기존 방식으로 돌아가 '110보드' 선을 에뮬레이션하려는 경우 좋은 소식이 있습니다. 이러한 작업을 수행할 수 있는 새 설정 패널이 추가되었습니다.
자동, Material, 맞춤 색상 팔레트
마법의 색상을 재현하거나 기존 색상 팔레트를 사용하려는 경우에도 개선된 색상 선택 도구를 사용하면 사이트에 일관된 색상 팔레트를 선택할 수 있습니다.
팔레트 옆에 있는 작은 전환 아이콘을 클릭하여 다음 중에서 선택할 수 있습니다.
- 페이지 색상: 이 팔레트는 CSS에서 찾은 색상으로 자동 생성되므로 기존 사이트를 확장하는 경우 유용합니다.
- Material Design — Material Design 팔레트는 즉시 사용할 수 있는 아름다운 색상을 제공하므로 새 프로젝트를 시작할 때 이상적인 선택입니다. 현재 모든 기본 색상이 제공되지만 곧 모든 색조가 제공될 예정입니다.
- 커스텀 — 나만의 플레이그라운드입니다. 선택 도구에서 색상을 선택하여 새 색상을 추가한 다음 팔레트 옆에 있는 '더하기' 아이콘을 클릭합니다. 항목을 드래그하여 재정렬하고 마우스 오른쪽 버튼을 클릭하면 삭제와 같은 추가 옵션이 표시됩니다.
의견을 보내주세요. 색상 스토리를 더욱 확장할 수 있는 방법도 알려주세요.
다재다능한
- fetch() API를 사용하여 한 요청이 이제 네트워크 패널에 표시됩니다.
- 자동 패널 레이아웃을 사용하면 DevTools
패널 크기를 조절할 때 새 공간 제약 조건에 맞게 조정됩니다. - 요소 및 기기 모드 검사에 새로운 아이콘이 추가되었습니다.
- 이제 노드가 강조 표시되어 있어도 DOM 패널의 속성이 다른 색상으로 표시됩니다. 이전에는 모두 흰색이었습니다.
- 숨겨진 요소 (선택한 DOM 노드에서 'h'를 눌러 활성화)는 이제 왼쪽에 회색 원 표시기가 표시되고 DOM 중단점은 파란색 원으로 표시됩니다. 이는 :hover와 같은 요소 상태를 강제하기 위해 이미 있는 주황색 표시기와 유사합니다.
언제나 그렇듯이 트위터 또는 아래 댓글을 통해 의견을 보내 주시고 crbug.com/new에 버그를 제출해 주세요.
그럼 다음 달까지
폴 바카우스 및 DevTools팀