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

DevTools의 새로운 기능 (Chrome 84)

Kayce Basques

새로운 문제 탭을 통한 사이트 문제 해결

창의 새로운 Issues 탭은 콘솔의 알림 피로와 복잡함을 줄이는 것을 목표로 합니다. 현재 콘솔은 웹사이트 개발자, 라이브러리, 프레임워크, Chrome 자체에서 메시지, 경고, 오류를 로깅하는 중앙 공간입니다. 문제 탭에는 구조화된 집계되고 실행 가능한 방식으로 브라우저의 경고가 표시되고 DevTools 내에서 영향을 받는 리소스로 연결되는 링크가 제공되며 문제 해결 방법을 안내해 줍니다. 시간이 지나면서 Console이 아닌 문제 탭에 Chrome 경고가 더 많이 표시되므로 Console을 깔끔하게 유지하는 데 도움이 됩니다.

시작하려면 Chrome DevTools 문제 발견 및 해결을 참고하세요.

문제 탭.

Chromium 버그: #1068116

이제 검사 모드 도움말은 요소에 액세스 가능한 이름 및 역할이 있고 키보드 포커스 가능인지 여부를 나타냅니다.

접근성 정보가 포함된 검사 모드 도움말

Chromium 버그: #1040025

성능 패널 업데이트

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

로드 성능을 기록한 후 성능 패널의 바닥글에 Total Blocking Time(TBT) 정보가 표시됩니다. TBT는 페이지를 사용할 수 있게 되는 데 걸리는 시간을 수량화하는 데 도움이 되는 로드 성능 측정항목입니다. 기본적으로 페이지가 사용 가능한 것으로 보이는 시간(콘텐츠가 화면에 렌더링되었기 때문)을 측정하지만, 자바스크립트가 기본 스레드를 차단하여 페이지가 사용자 입력에 응답할 수 없기 때문에 실제로는 사용할 수 없습니다. TBT는 Google의 새로운 코어 웹 바이탈 중 하나인 최초 입력 지연의 근사치를 추정하기 위한 기본 실습 측정항목입니다.

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

실적 패널 기록의 바닥글에 있는 총 차단 시간 정보

Chromium 버그: #1054381

새로운 환경 섹션의 레이아웃 변경 이벤트

성능 패널의 새로운 환경 섹션을 사용하면 레이아웃 변경을 감지할 수 있습니다. 누적 레이아웃 변경 (CLS)은 원치 않는 시각적 불안정성을 수치화하는 데 도움이 되는 측정항목이며 Google의 새로운 코어 웹 바이탈 중 하나입니다.

레이아웃 변경 이벤트를 클릭하여 요약 탭에서 레이아웃 변경의 세부정보를 확인합니다. 이동한 위치 및 다음으로 이동됨 필드 위로 마우스를 가져가면 레이아웃 변경이 발생한 위치를 시각적으로 확인할 수 있습니다.

레이아웃 변경의 세부정보

콘솔의 더 정확한 Promise 용어

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

이전의 '해결됨' 용어를 사용하는 콘솔의 예

이제 Console에서 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

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

Elements 패널의 Properties 창이 지원 중단되었습니다. 대신 Console에서 console.dir($0)를 실행하세요.

지원 중단된 속성 창.

참조:

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

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

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

Manifest 창의 앱 바로가기

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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