DevTools의 새로운 기능 (Chrome 90)

새로운 CSS flexbox 디버깅 도구

이제 DevTools에 전용 CSS flexbox 디버깅 도구가 있습니다.

페이지의 HTML 요소에 display: flex 또는 display: inline-flex가 적용된 경우 요소 패널에서 해당 요소 옆에 flex 배지가 표시됩니다. 배지를 클릭하여 페이지에 플렉스 오버레이 표시를 전환합니다.

스타일 창에서 display: flex 또는 display: inline-flex 옆에 있는 새 아이콘을 클릭하여 Flexbox 편집기를 열 수 있습니다. Flexbox 편집기를 사용하면 flexbox 속성을 빠르게 수정할 수 있습니다. 직접 사용해 보세요.

또한 레이아웃 창에는 Flexbox 섹션이 있어 페이지의 모든 flexbox 요소를 표시합니다. 각 요소의 오버레이를 전환할 수 있습니다.

Chromium 문제: 1166710, 1175699

새로운 핵심 성능 보고서 오버레이

새로운 핵심 성능 보고서 오버레이를 사용해 페이지 실적을 더 효과적으로 시각화하고 측정하세요.

핵심 성능 보고서는 웹에서 우수한 사용자 경험을 제공하는 데 필수적인 품질 신호에 대한 통합된 안내를 제공하는 Google의 이니셔티브입니다.

명령어 메뉴를 열고 렌더링 표시 명령어를 실행한 다음 Core Web Vitals 체크박스를 사용 설정합니다.

오버레이에 현재 다음 정보가 표시됩니다.

• 최대 콘텐츠 렌더링 시간 (LCP): 로드 성능을 측정합니다. 우수한 사용자 환경을 제공하려면 페이지가 처음 로드되기 시작한 지 2.5초 이내에 LCP가 발생해야 합니다.
• 첫 입력 지연 (FID): 상호작용을 측정합니다. 우수한 사용자 환경을 제공하려면 페이지의 FID가 100밀리초 미만이어야 합니다.
• 누적 레이아웃 변경 (CLS): 시각적 안정성을 측정합니다. 우수한 사용자 환경을 제공하려면 페이지의 CLS가 0.1 미만이어야 합니다.

Chromium 문제: 1152089

문제 탭 업데이트

문제 수를 콘솔 상태 표시줄로 이동

이제 문제 경고의 가시성을 개선하기 위해 콘솔 상태 표시줄에 새로운 문제 수 버튼이 추가되었습니다. 이렇게 하면 콘솔의 문제 메시지가 대체됩니다.

Chromium 문제: 1140516

신뢰할 수 있는 웹 활동 문제 신고

이제 문제 탭에 신뢰할 수 있는 웹 활동 문제가 표시됩니다. 이는 개발자가 사이트의 신뢰할 수 있는 웹 활동 문제를 이해하고 수정하여 애플리케이션의 품질을 개선하도록 지원하기 위한 것입니다.

신뢰할 수 있는 웹 활동을 엽니다. 그런 다음 콘솔 상태 표시줄에서 문제 수 버튼을 클릭하여 문제 탭을 열고 문제를 확인합니다. Andre의 강연을 시청하여 신뢰할 수 있는 웹 활동을 만들고 배포하는 방법을 자세히 알아보세요.

Chromium 문제: 1147479

콘솔에서 문자열을 (유효한) JavaScript 문자열 리터럴로 형식 지정

이제 콘솔은 문자열을 콘솔에서 유효한 JavaScript 문자열 리터럴로 서식을 지정합니다. 이전에는 콘솔에서 문자열을 출력할 때 큰따옴표가 이스케이프되지 않았습니다.

Chromium 문제: 1178530

애플리케이션 패널의 새로운 Trust Tokens 창

이제 DevTools는 애플리케이션 패널 아래의 새로운 신뢰 토큰 창에 현재 브라우징 컨텍스트에서 사용할 수 있는 모든 신뢰 토큰을 표시합니다.

신뢰 토큰은 패시브 추적 없이 사기를 방지하고 실제 사람과 봇을 구분하는 데 도움이 되는 새로운 API입니다. 신뢰 토큰을 시작하는 방법을 알아보세요.

Chromium 문제: 1126824

CSS color-gamut 미디어 기능 에뮬레이션

color-gamut 미디어 쿼리를 사용하면 브라우저와 출력 기기에서 지원하는 대략적인 색상 범위를 테스트할 수 있습니다. 예를 들어 color-gamut: p3 미디어 쿼리가 일치하면 사용자의 기기가 Display-P3 색상 공간을 지원한다는 의미입니다.

명령어 메뉴를 열고 렌더링 표시 명령어를 실행한 다음 CSS 미디어 기능 color-gamut 에뮬레이션 드롭다운을 설정합니다.

Chromium 문제: 1073887

향상된 프로그레시브 웹 앱 도구

이제 DevTools의 콘솔에 프로그레시브 웹 앱 (PWA) 설치 가능성 경고 메시지가 더 자세히 표시되며 문서 링크도 제공됩니다.

이제 매니페스트 창에 매니페스트 설명이 324자를 초과하는 경우 경고 메시지가 표시됩니다.

또한 이제 PWA의 스크린샷이 요구사항과 일치하지 않으면 매니페스트 창에 경고 메시지가 표시됩니다. PWA 스크린샷 속성 및 요구사항에 대해 자세히 알아보세요.

Chromium 문제: 1146450, 1169689, 965802

네트워크 패널의 새로운 Remote Address Space 열

네트워크 패널의 새로운 Remote Address Space 열을 사용하여 각 네트워크 리소스의 네트워크 IP 주소 공간을 확인하세요.

Chromium 문제: 1128885

성능 개선

DevTools가 열린 상태에서 페이지 로드 성능이 개선되었습니다. 극단적인 경우 10배의 성능 개선이 있었습니다.

DevTools는 스택 트레이스를 수집하고 문제가 발생할 경우 개발자가 나중에 사용할 수 있도록 콘솔 메시지나 비동기 작업에 연결합니다. 이 수집은 브라우저 엔진에서 동기적으로 이루어져야 하므로 스택 트레이스 수집이 느리면 DevTools가 열린 페이지의 속도가 크게 느려질 수 있습니다. 스택 트레이스 수집의 오버헤드를 크게 줄였습니다.

구현에 관해 설명하는 자세한 엔지니어링 블로그 게시물을 기대해 주세요.

Chromium 문제: 1069425, 1077657

프레임 세부정보 보기에 허용/허용되지 않는 기능 표시

이제 프레임 세부정보 뷰에 권한 정책으로 제어되는 허용된 브라우저 기능과 허용되지 않은 브라우저 기능 목록이 표시됩니다.

권한 정책은 웹사이트가 자체 프레임이나 삽입된 iframe에서 브라우저 기능의 사용을 허용하거나 차단할 수 있는 기능을 제공하는 웹 플랫폼 API입니다.

Chromium 문제: 1158827

쿠키 창의 새로운 SameParty 열

이제 애플리케이션 패널의 쿠키 창에 쿠키의 SameParty 속성이 표시됩니다. SameParty 속성은 쿠키가 동일한 퍼스트 파티 세트의 출처에 대한 요청에 포함되어야 하는지 여부를 나타내는 새로운 불리언 속성입니다.

Chromium 문제: 1161427

비표준 fn.displayName 지원 중단

비표준 fn.displayName 지원이 중단되었습니다. 대신 fn.name를 사용합니다.

Chrome은 개발자가 error.stack 및 DevTools 스택 트레이스에 표시되는 함수의 디버그 이름을 제어하는 방법으로 비표준 fn.displayName 속성을 지원해 왔습니다. 위의 예에서 호출 스택에는 이전에 noLongerSupport가 표시되었습니다.

fn.displayName를 표준 fn.name로 바꿉니다. 표준 fn.name는 ECMAScript 2015에서 비표준 fn.displayName 속성을 대체하기 위해 구성 가능 (Object.defineProperty를 통해)하도록 설정되었습니다.

fn.displayName 지원은 신뢰할 수 없으며 브라우저 엔진 간에 일관되지 않습니다. fn.displayName를 실제로 사용하는지 여부와 관계없이 개발자가 항상 지불하는 비용인 스택 트레이스 수집 속도가 느려집니다.

Chromium 문제: 1177685

설정 메뉴에서 Don't show Chrome Data Saver warning 지원 중단

Chrome 데이터 절약 모드가 지원 중단되었으므로 Don't show Chrome Data Saver warning 설정이 삭제됩니다.

Chromium 문제: 1056922

실험용 기능

문제 탭에서 저대비 문제 자동 보고

DevTools에서 문제 탭에 대비 문제를 자동으로 보고하는 실험적 지원을 추가했습니다.

저대비 텍스트는 웹에서 자동으로 감지할 수 있는 가장 일반적인 접근성 문제입니다. 문제 탭에 이러한 문제가 표시되면 개발자가 문제를 더 쉽게 발견할 수 있습니다.

저대비 문제가 있는 페이지 (예: 이 데모)를 엽니다. 그런 다음 콘솔 상태 표시줄에서 문제 수 버튼을 클릭하여 문제 탭을 열고 문제를 확인합니다.

Chromium 문제: 1155460

요소 패널의 전체 접근성 트리 보기

이제 페이지의 새롭고 개선된 전체 접근성 트리 보기를 전환하여 볼 수 있습니다.

현재 접근성 창은 노드를 제한적으로 표시하여 루트 노드에서 검사된 노드까지의 직접 상위 요소 체인만 표시합니다. 새로운 접근성 트리 보기는 이를 개선하고 접근성 트리를 더 쉽게 탐색하고, 유용하게 사용하고, 개발자가 더 쉽게 사용할 수 있도록 하는 것을 목표로 합니다.

실험을 사용 설정하면 요소 패널에 새 버튼이 표시됩니다. 이 버튼을 클릭하여 기존 DOM 트리와 전체 접근성 트리 간에 전환할 수 있습니다.

이 기능은 초기 단계의 실험입니다. 시간이 지남에 따라 기능을 개선하고 확장할 계획입니다.

Chromium 문제: 887173

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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

DevTools의 새로운 기능

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