DevTools의 새로운 기능 (Chrome 84)

Kayce Basques

새 문제 탭으로 사이트 문제 해결하기

드로어의 새로운 문제 탭은 Console의 알림 피로와 혼잡을 줄이기 위한 것입니다. 현재 콘솔은 웹사이트 개발자, 라이브러리, 프레임워크, Chrome 자체에서 메시지, 경고, 오류를 로깅하는 중앙 장소입니다. 문제 탭은 브라우저의 경고를 구조화되고 집계된 방식으로 실행 가능한 방식으로 표시하고, DevTools 내에서 영향을 받는 리소스에 연결하며, 문제를 해결하는 방법에 관한 안내를 제공합니다. 시간이 지남에 따라 점점 더 많은 Chrome 경고가 Console이 아닌 문제 탭에 표시되므로 Console의 혼잡을 줄일 수 있습니다.

시작하려면 Chrome DevTools 문제 탭으로 문제 찾기 및 해결하기를 참고하세요.

Chromium 버그: #1068116

검사 모드 도움말에서 접근성 정보 보기

이제 검사 모드 도움말에 요소에 액세스 가능한 이름 및 역할이 있고 키보드 포커스를 받을 수 있는지 여부가 표시됩니다.

Chromium 버그: #1040025

실적 패널 업데이트

바닥글에서 총 차단 시간 (TBT) 정보 보기

부하 성능을 기록하면 이제 성능 패널의 바닥글에 총 차단 시간(TBT) 정보가 표시됩니다. TBT는 페이지를 사용할 수 있게 되기까지 걸리는 시간을 수치화하는 데 도움이 되는 로드 성능 측정항목입니다. 기본적으로 페이지가 사용 가능한 것으로 표시되는 시간(콘텐츠가 화면에 렌더링되었기 때문에)을 측정하지만 JavaScript가 기본 스레드를 차단하므로 페이지가 사용자 입력에 응답할 수 없어 실제로는 사용할 수 없습니다. TBT는 Google의 새로운 Core Web Vitals 중 하나인 최초 입력 반응 시간을 근사하는 데 사용되는 기본 실험실 측정항목입니다.

총 차단 시간 정보를 가져오려면 페이지 로드 성능을 기록할 때 페이지 새로고침 워크플로를 사용하지 마세요. 대신 녹화 를 클릭하고 페이지를 수동으로 새로고침한 후 페이지가 로드될 때까지 기다렸다가 녹화를 중지합니다. Total Blocking Time: Unavailable가 표시되면 DevTools가 Chrome의 내부 프로파일링 데이터에서 필요한 정보를 가져오지 못한 것입니다.

Chromium 버그: #1054381

새 환경 섹션의 레이아웃 전환 이벤트

실적 패널의 새로운 환경 섹션을 사용하면 레이아웃 전환을 감지할 수 있습니다. 누적 레이아웃 이동 (CLS)은 원치 않는 시각적 불안정성을 수치화하는 데 도움이 되는 측정항목으로, Google의 새로운 Core Web Vitals 중 하나입니다.

Layout Shift 이벤트를 클릭하면 Summary 탭에서 레이아웃 이동의 세부정보를 확인할 수 있습니다. 이전 위치 및 이동한 위치 필드 위로 마우스를 가져가 레이아웃이 이동한 위치를 시각화합니다.

Console의 더 정확한 약속 용어

Promise를 로깅할 때 Console에서 Promise의 상태를 resolved로 잘못 설명했습니다.

이제 콘솔에서는 Promise 사양에 맞는 fulfilled라는 용어를 사용합니다.

V8 버그: #6751

스타일 창 업데이트

revert 키워드 지원

이제 스타일 창의 자동 완성 UI에서 revert CSS 키워드를 감지합니다. 이 키워드는 속성의 계층식 값을 요소의 스타일을 변경하지 않은 경우의 값으로 되돌립니다.

Chromium 버그: #1075437

이미지 미리보기

스타일 창에서 background-image 값 위로 마우스를 가져가면 도움말에 이미지의 미리보기가 표시됩니다.

Chromium 버그: #1040019

이제 색상 선택 도구에서 공백으로 구분된 기능 색상 표기법을 사용합니다.

CSS 색상 모듈 레벨 4는 rgb()와 같은 색상 함수가 공백으로 구분된 인수를 지원해야 한다고 지정합니다. 예를 들어 rgb(0, 0, 0)는 rgb(0 0 0)와 동일합니다.

색상 선택 도구로 색상을 선택하거나 Shift 키를 누른 다음 색상 값을 클릭하여 스타일 창에서 색상 표현 간에 전환하면 공백으로 구분된 인수 문법이 표시됩니다.

Computed 창과 Inspect Mode 도움말에도 문법이 표시됩니다.

color()와 같은 향후 CSS 기능이 지원 중단된 쉼표로 구분된 인수 구문을 지원하지 않기 때문에 DevTools에서는 새 구문을 사용합니다.

공백으로 구분된 인수 문법은 한동안 대부분의 브라우저에서 지원되었습니다. 공백으로 구분된 기능 색상 표기법을 사용할 수 있나요?를 참고하세요.

Chromium 버그: #1072952

요소 패널의 속성 창 지원 중단

요소 패널의 속성 창이 지원 중단되었습니다. 대신 Console에서 console.dir($0)를 실행합니다.

참조:

• console.dir()
• $0

매니페스트 창의 앱 바로가기 지원

앱 바로가기를 사용하면 사용자가 웹 앱 내에서 자주 실행되거나 권장되는 작업을 빠르게 시작할 수 있습니다. 앱 바로가기 메뉴는 사용자의 데스크톱 또는 휴대기기에 설치된 프로그레시브 웹 앱에만 표시됩니다.

자세한 내용은 앱 바로가기로 빠르게 작업 처리하기를 참고하세요.

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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

DevTools의 새로운 기능

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