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

DevTools의 새로운 기능 (Chrome 84)

Kayce Basques

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

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

시작하려면 Chrome DevTools 문제 탭으로 문제 찾기 및 해결을 확인하세요.

문제 탭

Chromium 버그: #1068116

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

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

Chromium 버그: #1040025

성능 패널 업데이트

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

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

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

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

Chromium 버그: #1054381

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

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

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

레이아웃 변경의 세부정보입니다.

콘솔의 더 정확한 프라미스 용어

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

기존의 '해결' 용어를 사용하는 콘솔의 예

이제 Console에서 Promise 사양과 일치하는 fulfilled라는 용어를 사용합니다.

새로운 '처리' 용어를 사용하는 Console의 예

V8 버그: #6751

Styles 창 업데이트

`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.dir($0)를 실행하세요.

지원 중단된 속성 창

참조:

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

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

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

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

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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