이 페이지는 Cloud Translation API를 통해 번역되었습니다.

DevTools의 새로운 기능 (Chrome 77)

Kayce Basques

요소의 스타일 복사

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

스타일 복사를 클릭합니다.

그림 1. 요소 스타일 복사

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

레이아웃 변경 시각화

즐겨찾는 웹사이트에서 뉴스 기사를 읽고 있다고 가정해 보겠습니다. 페이지를 읽으면서 콘텐츠가 여기저기 돌아다니기 때문에 읽던 내용을 자꾸 잃어버립니다. 이 문제를 레이아웃 이동이라고 합니다. 일반적으로 이미지와 광고의 로드가 완료될 때 발생합니다. 페이지에 이미지와 광고를 위한 공간이 예약되어 있지 않으므로 브라우저에서는 이미지를 위한 공간을 확보하기 위해 다른 모든 콘텐츠를 아래로 옮겨야 합니다. 해결 방법은 placeholders를 사용하는 것입니다.

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

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

레이아웃 변경

그림 2. 레이아웃 변경

Chromium 문제 #961846

감사 패널의 Lighthouse 5.1

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

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

새로운 감사 패널 UI

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

Lighthouse 5.1의 Node 및 CLI 버전에는 3가지 새로운 주요 기능이 있습니다.

성능 예산. 페이지가 초과해서는 안 되는 요청 수와 파일 크기를 지정하여 시간이 지남에 따라 사이트가 회귀하는 것을 방지합니다.
플러그인. 자체 맞춤 감사로 Lighthouse를 확장하세요.
스택 팩. 특정 기술 스택에 맞춤화된 감사를 추가합니다. WordPress Stack Pack이 먼저 배송되었습니다. React 및 AMP Stack Pack은 현재 개발 중입니다.

OS 테마 동기화

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

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

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

중단점 편집기

그림 4. 중단점 편집기.

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

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

리소스가 프리패치 캐시에서 제공되었음을 보여주는 크기 열

도표 5. Size 열은 prefetch2.html와 prefetch2.css가 (prefetch cache)에서 제공되었음을 보여줍니다.

사용해 보려면 데모 미리 가져오기를 참조하세요.

Chromium 문제 #935267

객체 보기 시 사유지

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

객체를 검사할 때 콘솔에서 이제 '#color'와 같은 비공개 필드를 표시합니다.

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

Application 패널의 알림 및 푸시 메시지

Application 패널의 Background Services 섹션에서 이제 푸시 메시지와 알림을 지원합니다. 푸시 메시지는 서버가 서비스 워커에 정보를 보낼 때 발생합니다. 서비스 워커 또는 페이지 스크립트가 사용자에게 정보를 표시하면 알림이 발생합니다.

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

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

그림 7. Application 패널의 새 푸시 메시지 및 알림 창.

Chromium 문제 #927726

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

게시물에서 새로운 기능과 변경사항 또는 DevTools와 관련된 다른 항목에 대해 논의하려면 다음 옵션을 사용하세요.

crbug.com을 통해 제안 또는 의견을 제출하세요.
DevTools에서 옵션 더보기 > 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 신고합니다.
@ChromeDevTools로 트윗을 보냅니다.
DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 팁 YouTube 동영상에 댓글을 남겨주세요.