DevTools의 새로운 기능 (Chrome 77)

Kayce Basques

요소의 스타일 복사

DOM 트리에서 노드를 마우스 오른쪽 버튼으로 클릭하여 해당 DOM 노드의 CSS를 클립보드에 복사합니다.

스타일을 복사합니다.

그림 1. 요소 스타일을 복사합니다.

아이디어를 제공해 주신 Adam Argyle님과 VisBug님께 감사드립니다.

레이아웃 변경 시각화

좋아하는 웹사이트에서 뉴스 기사를 읽고 있다고 가정해 보겠습니다. 페이지를 읽는 동안 콘텐츠가 여기저기 움직여서 읽던 부분을 계속 놓치게 됩니다. 이 문제를 레이아웃 전환이라고 합니다. 이는 일반적으로 이미지와 광고 로드가 완료될 때 발생합니다. 페이지에서 이미지와 광고를 위한 공간을 확보하지 않았으므로 브라우저는 다른 모든 콘텐츠를 아래로 이동하여 공간을 확보해야 합니다. 해결 방법은 자리표시자를 사용하는 것입니다.

이제 DevTools를 사용하여 레이아웃 전환을 감지할 수 있습니다.

  1. 명령어 메뉴를 엽니다.
  2. Rendering를 입력합니다.
  3. 렌더링 표시 명령어를 실행합니다.
  4. 레이아웃 변경 지역 체크박스를 사용 설정합니다. 페이지와 상호작용할 때 레이아웃 변경사항이 파란색으로 강조 표시됩니다.

레이아웃 변경

그림 2. 레이아웃 변경

Chromium 문제 #961846

감사 패널의 Lighthouse 5.1

이제 감사 패널에서 Lighthouse 5.1을 실행합니다. 새로운 감사에는 다음이 포함됩니다.

  • 유효한 apple-touch-icon를 제공합니다. PWA를 iOS 홈 화면에 추가할 수 있는지 확인합니다.
  • 요청 수와 파일 크기를 작게 유지하세요. 문서, 스크립트, 스타일시트, 이미지 등 다양한 카테고리의 총 네트워크 요청 수와 파일 크기를 보고합니다.
  • 최대 첫 입력 지연 예상 시간 사용자의 첫 페이지 상호작용과 이 상호작용에 대한 브라우저의 응답 간에 발생할 수 있는 최대 시간을 측정합니다. 이 측정항목은 예상 입력 지연 시간 측정항목을 대체합니다. 최대 첫 입력 지연 예상 시간은 실적 카테고리 점수에 반영되지 않습니다.

새로운 감사 패널 UI

그림 3. 새로운 감사 패널 UI

Lighthouse 5.1의 Node 및 CLI 버전에는 확인해 볼 만한 세 가지 주요 기능이 있습니다.

  • 실적 예산 페이지에서 초과해서는 안 되는 요청 수와 파일 크기를 지정하여 시간이 지남에 따라 사이트가 회귀하지 않도록 합니다.
  • 플러그인 자체 맞춤 감사로 Lighthouse를 확장하세요.
  • 스택 팩 특정 기술 스택에 맞게 조정된 감사를 추가합니다. WordPress 스택 팩이 먼저 제공되었습니다. React 및 AMP 스택 팩은 현재 개발 중입니다.

OS 테마 동기화

OS의 어두운 테마를 사용하는 경우 이제 DevTools가 자체 어두운 테마로 자동 전환됩니다.

중단점 편집기를 여는 단축키

소스 패널의 편집기에 포커스가 있을 때 Control+Alt+B 또는 Command+Option+B (Mac)를 눌러 중단점 편집기를 엽니다. 중단점 편집기를 사용하여 로그 지점 및 조건부 중단점을 만듭니다.

중단점 편집기

그림 4. 중단점 편집기

네트워크 패널에서 캐시 미리 가져오기

이제 리소스가 미리 가져오기 캐시에서 로드되면 네트워크 패널의 크기 열에 (prefetch cache)가 표시됩니다. 프리페치는 후속 페이지 로드 속도를 높이기 위한 새로운 웹 플랫폼 기능입니다. Can I use...에 따르면 2019년 7월 현재 전 세계 브라우저의 83.33% 에서 지원됩니다.

리소스가 미리 가져오기 캐시에서 가져온 것을 보여주는 크기 열

그림 5. 크기 열은 prefetch2.html 및 prefetch2.css가 (prefetch cache)에서 가져온 것을 보여줍니다.

미리 가져오기 데모를 참고하여 사용해 보세요.

Chromium 문제 #935267

객체를 볼 때 비공개 속성

이제 Console의 객체 미리보기에 비공개 클래스 필드가 표시됩니다.

이제 객체를 검사할 때 Console에 '#color'와 같은 비공개 필드가 표시됩니다.

그림 6. 왼쪽의 이전 버전 Chrome에서는 객체를 검사할 때 #color 필드가 표시되지 않지만 오른쪽의 새 버전에서는 표시됩니다.

애플리케이션 패널의 알림 및 푸시 메시지

이제 애플리케이션 패널의 백그라운드 서비스 섹션에서 푸시 메시지와 알림을 지원합니다. 푸시 메시지는 서버가 서비스 워커에 정보를 전송할 때 발생합니다. 알림은 서비스 워커 또는 페이지 스크립트가 사용자에게 정보를 표시할 때 발생합니다.

Chrome 76의 백그라운드 가져오기 및 백그라운드 동기화 기능과 마찬가지로 녹화를 시작하면 페이지가 닫혀 있거나 Chrome이 닫혀 있더라도 이 페이지의 푸시 메시지와 알림이 3일 동안 녹화됩니다.

새로운 알림 및 푸시 메시지 창

그림 7. 애플리케이션 패널의 새로운 푸시 메시지 및 알림 창

Chromium 문제 #927726

미리보기 채널 다운로드

Chrome Canary, 개발자 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 미리보기 채널을 사용하면 최신 DevTools 기능에 액세스하고, 최신 웹 플랫폼 API를 테스트하고, 사용자가 발견하기 전에 사이트에서 문제를 찾을 수 있습니다.

Chrome DevTools팀에 문의하기

다음 옵션을 사용하여 DevTools와 관련된 새로운 기능, 업데이트 또는 기타 사항을 논의하세요.

DevTools의 새로운 기능

DevTools의 새로운 기능 시리즈에서 다룬 모든 항목의 목록입니다.