DevTools의 새로운 기능 (Chrome 90)

Jecelyn Yeen

새로운 CSS Flexbox 디버깅 도구

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

CSS Flexbox 디버깅 도구

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

스타일 창에서 display: flex 옆에 있는 새 아이콘을 클릭하거나 display: inline-flex: Flexbox 편집기를 엽니다. Flexbox 편집기는 빠른 수정 방법을 제공합니다. Flexbox 속성을 살펴보겠습니다. 직접 해 보세요.

또한 Layout 창에는 Flexbox 섹션이 있으며 이 섹션에는 모든 Flexbox 요소가 있습니다. 각 요소의 오버레이를 전환할 수 있습니다.

레이아웃 창의 Flexbox 섹션

Chromium 문제: 1166710, 1175699

새로운 Core Web Vitals 오버레이

새로운 Core Web Vitals 오버레이로 페이지 성능을 더 효과적으로 시각화하고 측정하세요.

코어 웹 바이탈은 중요한 품질 신호에 관한 통합 가이드를 제공하기 위한 Google의 이니셔티브입니다. 웹에서 훌륭한 사용자 환경을 제공하는 데 필수적입니다.

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

현재 오버레이에 표시되는 내용은 다음과 같습니다.

  • 최대 콘텐츠 페인트 (LCP): 로드 성능을 측정합니다. 양질의 사용자 제공 페이지 로드가 시작된 후 2.5초 이내에 LCP가 발생해야 합니다.
  • 첫 입력 지연 (FID): 상호작용을 측정합니다. 우수한 사용자 환경을 제공하기 위해 FID는 100밀리초 미만이어야 합니다.
  • 누적 레이아웃 변경 (CLS): 시각적 안정성을 측정합니다. 양질의 사용자 제공 환경에서는 페이지의 CLS를 0.1 미만으로 유지해야 합니다.

Core Web Vitals 오버레이

Chromium 문제: 1152089

문제 탭 업데이트

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

이제 콘솔 상태 표시줄에 새로운 문제 수 버튼이 추가되어 있습니다. 그러면 콘솔의 문제 메시지가 대체됩니다.

콘솔 상태 표시줄의 문제 수

Chromium 문제: 1140516

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

이제 문제 탭에서 신뢰할 수 있는 웹 활동 문제를 보고합니다. 이는 개발자가 신뢰할 수 있는 웹 활동 문제를 이해하고 해결하여 사이트의 품질을 애플리케이션을 실행할 수 있습니다

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

'문제' 탭의 신뢰할 수 있는 웹 활동 문제

Chromium 문제: 1147479

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

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

문자열의 형식을 (유효한) JavaScript 문자열 리터럴로 지정합니다.

Chromium 문제: 1178530

Application 패널의 새 Trust Tokens 창

DevTools가 현재 탐색 컨텍스트에서 사용 가능한 모든 신뢰 토큰을 새로운 Trust Application 패널 아래 토큰 창

신뢰 토큰은 수동적인 수동 방식 없이 사기를 퇴치하고 실제 사람과 봇을 구분하는 데 도움이 되는 새로운 API입니다. 있습니다. 신뢰 토큰을 시작하는 방법을 알아보세요.

새 신뢰 토큰 창

Chromium 문제: 1126824

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

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

color-gamut 미디어 쿼리를 사용하면 지원되는 색상 범위를 대략적으로 테스트할 수 있습니다. 정보를 전달합니다. 예를 들어 color-gamut: p3 미디어 쿼리가 일치하면 사용자 기기가 Display-P3 색공간을 지원한다는 의미입니다.

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

Chromium 문제: 1073887

프로그레시브 웹 앱 도구 개선

이제 DevTools에 더 자세한 프로그레시브 웹 앱 (PWA) 설치 가능성 경고 메시지가 표시됩니다. 콘솔에 있으며 문서 링크 포함

PWA 설치 가능 경고

이제 매니페스트 description이 324를 초과하면 Manifest 창에 경고 메시지가 표시됨 있습니다.

PWA 설명 자르기 경고

또한 이제 PWA의 스크린샷이 표시되지 않는 경우 Manifest 창에 경고 메시지가 표시됩니다. 요구사항을 충족하는지 확인해야 합니다 PWA 스크린샷 속성 및 관련 요구사항에 대해 자세히 알아보기 여기에서 확인하세요.

PWA 스크린샷 경고

Chromium 문제: 1146450, 1169689, 965802

Network 패널의 새로운 Remote Address Space 열

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

새로운 '원격 주소 공간' 열

Chromium 문제: 1128885

성능 개선

이제 DevTools가 열린 상태에서 페이지 로드 성능이 개선되었습니다. 하지만 일부 극단적인 경우에는 10배 성능을 개선할 수 있습니다

DevTools는 스택 트레이스를 수집하여 나중을 위해 콘솔 메시지 또는 비동기 작업에 첨부합니다. 문제가 발생했을 때 개발자가 소비하지 않도록 합니다. 이 수집은 동기식으로 발생해야 하므로 스택 트레이스 수집 속도가 느리면 DevTools가 열립니다. 스택 트레이스 수집의 오버헤드를 크게 줄일 수 있었습니다.

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

Chromium 문제: 1069425, 1077657

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

이제 프레임 세부정보 보기에 권한 정책

권한 정책은 웹사이트에서 허용 또는 차단 기능을 제공하는 웹 플랫폼 API입니다. 자체 프레임 또는 삽입된 iframe에서 브라우저 기능을 사용하지 않습니다.

권한 정책에 따라 허용/허용되지 않는 기능

Chromium 문제: 1158827

쿠키 창의 새로운 SameParty 열

이제 Application 패널의 Cookies 창에 쿠키의 SameParty 속성이 표시됩니다. 이 SameParty 속성은 쿠키를 포함해야 하는지 여부를 나타내는 새로운 불리언 속성입니다. 동일한 퍼스트 파티 세트의 출처에 대한 요청을 전송합니다.

SameParty 열

Chromium 문제: 1161427

비표준 fn.displayName 지원이 중단됨

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

displayName 사용 예

Chrome은 기존에 다음과 같은 방법으로 비표준 fn.displayName 속성을 지원했습니다. 개발자가 error.stack 및 DevTools 스택에 표시되는 함수의 디버그 이름을 제어 추적 위의 예에서 Call Stack은 이전에는 noLongerSupport를 표시했습니다.

fn.displayName를 다음과 같이 구성 가능한 표준 fn.name로 대체합니다. Object.defineProperty)를 사용하여 비표준fn.displayName 속성을 대체합니다.

fn.displayName 지원이 불안정하고 브라우저 엔진 전체에서 일관되지 않았습니다. 속도가 느립니다. 다운 스택 트레이스 수집으로, 개발자가 실제로 사용 여부에 관계없이 항상 지불해야 하는 비용입니다. fn.displayName인지 여부입니다.

이름 사용 예

Chromium 문제: 1177685

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

Chrome 데이터 절약 모드가 Don't show Chrome Data Saver warning 지원 중단됨

'Chrome 데이터 절약 모드 경고 표시 안함'이 지원 중단됨 설정

Chromium 문제: 1056922

실험용 기능

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

DevTools에 문제 탭에서 대비 문제를 보고하기 위한 실험용 지원이 자동으로 추가되었습니다.

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

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

저대비 문제 자동 보고

Chromium 문제: 1155460

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

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

현재 접근성 창은 노드를 제한적으로 표시하며 루트 노드에서 검사된 노드로 직접 상위 체인 새로운 접근성 트리 보기는 접근성 트리를 더욱 탐색 가능하고 유용하며 개발자가 쉽게 만들 수 있습니다. 있습니다.

실험을 사용 설정하면 요소 패널에 새 버튼이 표시되며, 클릭하여 전환합니다. 완전히 결합되어 있습니다.

이 실험은 초기 단계라는 점에 유의해 주세요. Google은 이 기능을 개선하고 확장할 계획입니다. 확인할 수 있습니다

전체 접근성 트리 보기

Chromium 문제: 887173

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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

DevTools의 새로운 기능

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