DevTools의 새로운 기능 (Chrome 77)

Kayce Basques

요소의 스타일 복사

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

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

아이디어를 얻은 Adam Argyle님과 VisBug님께 감사드립니다.

레이아웃 변경 시각화

즐겨찾는 웹사이트에서 뉴스 기사를 읽고 있다고 가정해 보겠습니다. 페이지를 읽는 동안 콘텐츠가 여기저기 올라오기 때문에 자칫 내 위치를 놓치게 됩니다. 이 문제를 레이아웃이라고 합니다 있습니다. 일반적으로 이미지와 광고의 로드가 완료될 때 발생합니다. 페이지에 공간이 예약되지 않았습니다. 따라서 브라우저가 다른 모든 콘텐츠를 아래로 옮겨서 공간을 확보해야 있습니다. 해결 방법은 자리표시자를 사용하는 것입니다.

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

1. 명령어 메뉴를 엽니다.
2. Rendering를 입력합니다.
3. 렌더링 표시 명령어를 실행합니다.
4. Layout Shift Region(레이아웃 변경 영역) 체크박스를 사용 설정합니다. 페이지와 상호작용할 때 레이아웃은 강조표시됩니다.

그림 2. 레이아웃 변경

Chromium 문제 #961846

감사 패널의 Lighthouse 5.1

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

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

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

Lighthouse 5.1의 노드 및 CLI 버전에는 다음과 같은 3가��� 주요 기능이 있습니다.

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

OS 테마 동기화

OS의 어두운 테마를 사용 중인 경우 이제 DevTools가 자체 어두운 테마로 전환됩니다. 자동으로 확장 및 축소할 수 있습니다

중단점 편집기를 열기 위한 단축키

Control+Alt+B를 누르거나 Command+Option+B(Mac)(Sources 패널의 편집기에 포커스가 있을 때) Breakpoint Editor를 엽니다. 중단점 편집기를 사용하여 로그 지점을 만들고 조건부 중단점.

그림 4. Breakpoint Editor.

Network 패널에서 캐시 미리 가져오기

리소스가 로드된 경우 Network 패널의 Size 열에 이제 (prefetch cache)이 표시됩니다. 미리 가져오기 캐시를 사용합니다 미리 가져오기는 새로운 웹 플랫폼에서 후속 페이지의 속도를 빠르게 하는 기능입니다. 있습니다. 사용할 수 있나요? 보고서는 2019년 7월 기준으로 전 세계 브라우저의 83.33% 에서 지원된다고 보고합니다.

그림 5. 크기 열은 prefetch2.html 및 prefetch2.css가 (prefetch cache)입니다.

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

Chromium 문제 #935267

객체를 볼 때의 비공개 속성

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

그림 6. 왼쪽에 있는 이전 버전의 Chrome에서는 검사 시 #color 필드가 표시되지 않습니다. 객체가 있는 반면, 오른쪽의 새 버전은 새 버전을 사용합니다.

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

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

Chrome 76의 백그라운드 가져오기 및 백그라운드 동기화 기능과 마찬가지로 기록, 푸시 메시지 및 알림이 3일 동안 기록됩니다. Chrome이 종료되어도 마찬가지입니다.

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

Chromium 문제 #927726

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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

DevTools의 새로운 기능

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