DevTools의 새로운 기능 (Chrome 84)

Kayce Basques

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

창의 새로운 Issues 탭은 알림으로 인한 번거로움과 복잡함을 줄이기 위해 콘솔. 현재 콘솔은 웹사이트 개발자, 라이브러리, Chrome 자체를 사용하여 메시지, 경고, 오류를 로깅합니다. 문제 탭에는 구조화되고 집계 및 실행 가능한 방식으로 브라우저에 표시되는 경고는 영향을 받은 문제 해결 방법에 대한 안내를 제공합니다. 시간이 지남에 따라 의 Chrome 경고가 콘솔이 아닌 문제 탭에 표시되므로 간소화할 수 있습니다.

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

Chromium 버그: #1068116

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

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

Chromium 버그: #1040025

성능 패널 업데이트

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

로드 성능을 기록한 후 Performance 패널에 Total Blocking Time(총 차단 시간)이 표시됩니다. (TBT) 정보를 바닥글에 입력합니다. TBT는 데이터가 얼마나 오래 지속될지 정량화하는 데 도움이 되는 페이지를 사용할 수 있게 됩니다 기본적으로 페이지가 사용 가능한 것처럼 보이는 시간을 측정합니다. (콘텐츠가 화면에 렌더링되었기 때문)이지만 실제로 사용할 수는 없습니다. 기본 스레드를 차단하고 있으므로 페이지가 사용자 입력에 응답할 수 없습니다. TBT는 기본 실습입니다. 측정항목을 사용하면 Google의 새로운 코어 웹 바이탈 중 하나인 최초 입력 지연을 대략적으로 측정할 수 있습니다.

총 차단 시간 정보를 확인하려면 페이지 새로고침을 사용하지 마세요. <ph type="x-smartling-placeholder"></ph> 페이지 로드 성능을 기록하기 위한 워크플로입니다. 대신 녹화를 클릭합니다. , 수동으로 페이지를 새로고침하고 페이지가 로드될 때까지 기다린 다음 기록을 중지합니다. 만약 Total Blocking Time: Unavailable: DevTools가 필요한 정보를 Chrome의 내부 프로파일링 데이터입니다.

Chromium 버그: #1054381

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

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

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

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

Promise를 로깅할 때 콘솔은 Promise의 상태를 다음과 같이 잘못 설명하는 데 사용했습니다. resolved:

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

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 도움말에서도 문법을 확인할 수 있습니다.

DevTools는 새로운 구문을 사용하고 있습니다. color()와 같은 향후 CSS 기능이 지원 중단된 쉼표로 구분된 인수 구문.

공백으로 구분된 인수 구문은 한동안 대부분의 브라우저에서 지원되었습니다. 공백으로 구분된 기능 색상 표기법

Chromium 버그: #1072952

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

Elements 패널의 Properties 창은 지원 중단되었습니다. 다음에서 console.dir($0) 실행: 대신 콘솔을 사용하세요.

참조:

• console.dir()
• $0

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

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

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

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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

DevTools의 새로운 기능

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