DevTools의 새로운 기능 (Chrome 86)

Jecelyn Yeen

뉴 미디어 패널

이제 DevTools의 미디어 패널에 미디어 플레이어 정보가 표시됩니다.

뉴 미디어 패널

DevTools의 새 미디어 패널이 도입되기 전에는 동영상 플레이어에 관한 로깅 및 디버그 정보를 chrome://media-internals에서 확인할 수 있었습니다.

새 미디어 패널을 사용하면 동영상 플레이어와 동일한 브라우저 탭에서 이벤트, 로그, 속성, 프레임 디코딩 타임라인을 더 쉽게 볼 수 있습니다. 발생할 수 있는 문제 (예: 프레임이 누락되는 이유, JavaScript가 플레이어와 예상치 못한 방식으로 상호작용하는 이유)를 실시간으로 보고 검사할 수 있습니다.

Chromium 문제: 1018414

Elements 패널 컨텍스트 메뉴를 통해 노드 스크린샷 캡처

이제 Elements 패널의 컨텍스트 메뉴를 통해 노드 스크린샷을 캡처할 수 있습니다.

예를 들어 요소를 마우스 오른쪽 버튼으로 클릭하고 노드 스크린샷 캡처를 선택하여 목차의 스크린샷을 찍을 수 있습니다.

노드 스크린샷 캡처

Chromium 문제: 1100253

문제 탭 업데이트

이제 콘솔 패널의 문제 경고 표시줄이 일반 메시지로 대체되었습니다.

콘솔 메시지 문제

이제 서드 파티 쿠키 문제가 기본적으로 '문제' 탭에 숨겨집니다. 새로운 서드 파티 쿠키 문제 포함 체크박스를 사용 설정하여 확인합니다.

서드 파티 쿠키 문제 체크박스

Chromium 문제: 1096481, 1068116, 1080589

누락된 로컬 글꼴 에뮬레이션

렌더링 탭을 열고 새 로컬 글꼴 사용 중지 기능을 사용하여 @font-face 규칙에서 누락된 local() 소스를 에뮬레이션합니다.

예를 들어 'Rubik' 글꼴이 기기에 설치되어 있고 @font-face src 규칙에서 이 글꼴을 local() 글꼴로 사용하는 경우 Chrome은 기기의 로컬 글꼴 파일을 사용합니다.

로컬 글꼴 사용 중지가 사용 설정되면 DevTools는 local() 글꼴을 무시하고 네트워크에서 가져옵니다.

누락된 로컬 글꼴 에뮬레이션

개발자와 디자이너는 개발 중에 동일한 글꼴의 두 가지 사본을 사용하는 경우가 많습니다.

  • 디자인 도구의 로컬 글꼴
  • 코드용 웹 글꼴

로컬 글꼴을 사용 중지하면 다음 작업을 더 쉽게 할 수 있습니다.

  • 웹 글꼴 로드 성능 및 최적화 디버그 및 측정
  • CSS @font-face 규칙의 정확성 확인
  • 웹 글꼴과 로컬 버전의 차이점 확인

Chromium 문제: 384968

비활성 사용자 에뮬레이션

Idle Detection API를 사용하면 개발자가 비활성 사용자를 감지하고 유휴 상태 변경에 반응할 수 있습니다. 이제 DevTools를 사용하여 실제 유휴 상태가 변경될 때까지 기다리지 않고 사용자 상태와 화면 상태 모두에 대해 센서 탭에서 유휴 상태 변경을 에뮬레이션할 수 있습니다. 서랍에서 센서 탭을 열 수 있습니다.

비활성 사용자 에뮬레이션

Chromium 문제: 1090802

prefers-reduced-data 에뮬레이션

prefers-reduced-data 미디어 쿼리는 사용자가 페이지 렌더링에 더 적은 데이터를 사용하는 대체 콘텐츠를 선호하는지 감지합니다.

이제 DevTools를 사용하여 prefers-reduced-data 미디어 쿼리를 에뮬레이션할 수 있습니다.

prefers-reduced-data 에뮬레이션

Chromium 문제: 1096068

새로운 JavaScript 기능 지원

이제 DevTools에서 일부 최신 JavaScript 언어 기능을 더 효과적으로 지원합니다.

  • 논리 할당 연산자 - 이제 DevTools에서 콘솔 및 소스 패널의 새 연산자 &&=, ||=, ??=를 사용하여 논리 할당을 지원합니다.
  • 숫자 구분자의 멋진 출력 - 이제 DevTools가 Sources 패널에서 숫자 구분자를 올바르게 멋진 형식으로 출력합니다.

Chromium 문제: 1086817, 1080569

Lighthouse 패널의 Lighthouse 6.2

이제 Lighthouse 패널에서 Lighthouse 6.2가 실행됩니다. 전체 변경사항 목록은 출시 노트를 참고하세요.

이미지 크기 조절 해제

Lighthouse 6.2의 새로운 감사:

  • 긴 기본 스레드 작업을 피합니다. 기본 스레드의 가장 긴 작업을 보고합니다. 입력 지연을 가장 많이 유발하는 작업을 찾을 때 유용합니다.
  • 링크를 크롤링할 수 있습니다. 앵커 요소의 href 속성이 적절한 대상에 연결되어 링크를 검색할 수 있는지 확인합니다.
  • 크기가 지정되지 않은 이미지 요소 - 이미지 요소에 명시적인 width 및 height가 설정되어 있는지 확인합니다. 명시적인 이미지 크기를 사용하면 레이아웃 변경 횟수를 줄이고 CLS를 개선할 수 있습니다.
  • 합성 작업을 거치지 않은 애니메이션을 피하세요. 불안정하고 CLS를 감소시키는 합성되지 않은 애니메이션을 보고합니다.
  • unload 이벤트를 수신 대기합니다. unload 이벤트를 보고합니다. unload 이벤트가 안정적으로 실행되지 않으므로 대신 pagehide 또는 visibilitychange 이벤트를 사용하는 것이 좋습니다.

Lighthouse 6.2의 업데이트된 감사:

  • 사용하지 않는 JavaScript 삭제 이제 페이지에 공개적으로 액세스할 수 있는 JavaScript 소스 맵이 있는 경우 Lighthouse에서 감사를 개선합니다.

Chromium 문제: 772558

서비스 워커 창의 '기타 출처' 목록 지원 중단

이제 DevTools에서 새 브라우저 탭 chrome://serviceworker-internals/?devtools에서 다른 출처의 서비스 워커 전체 목록을 볼 수 있는 링크를 제공합니다.

이전에는 DevTools에 Application 패널 > Service workers 창 아래에 중첩된 목록이 표시되었습니다.

다른 출처 링크

Chromium 문제: 807440

필터링된 항목의 노출 범위 요약 표시

이제 DevTools는 범위 탭에 필터를 적용할 때 노출 범위 정보의 요약을 동적으로 다시 계산하고 표시합니다. 이전에는 범위 탭에 항상 모든 범위 정보의 요약이 표시되었습니다.

아래 예에서 요약이 처음에는 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused.로 표시되었다가 CSS 필터링이 적용된 후 57 kB of 604 kB (10%) used so far. 546 kB unused.로 표시되는 방식을 확인해 보세요.

필터링된 항목의 노출 범위 요약

Chromium 문제: 1061385

애플리케이션 패널의 새로운 프레임 세부정보 보기

이제 DevTools에 각 프레임의 세부정보 보기가 표시됩니다. 애플리케이션 패널의 프레임 메뉴에서 프레임을 클릭하여 액세스합니다.

애플리케이션 패널의 새로운 프레임 세부정보 보기

Chromium 문제: 1093247

열린 창의 프레임 세부정보

이제 DevTools에서 프레임 트리 아래에 열린 창 / 팝업도 표시합니다. 열린 창의 프레임 세부정보 보기에는 추가 보안 정보가 포함됩니다.

열린 창 프레임 세부정보

Chromium 문제: 1107766

보안 및 격리 정보 (COEP / COOP)

이제 DevTools에서 프레임 세부정보에 보안 컨텍스트, Cross-Origin-Embedder-Policy (COEP) 및 Cross-Origin-Opener-Policy (COOP)를 표시합니다.

보안 및 격리 정보

곧 프레임 세부정보 보기에 더 많은 보안 정보가 추가될 예정입니다.

Chromium 문제: 1051466

요소 및 네트워크 패널 업데이트

스타일 창의 접근성 색상 추천

이제 DevTools에서 색상 대비가 낮은 텍스트에 적합한 색상을 추천합니다.

아래 예에서 h1에는 대비가 낮은 텍스트가 있습니다. 이 문제를 해결하려면 스타일 창에서 color 속성의 색상 선택 도구를 엽니다. 대비율 섹션을 펼치면 DevTools에서 AA 및 AAA 색상 추천을 제공합니다. 추천 색상을 클릭하여 색상을 적용합니다.

Chromium 문제: 1093227

요소 패널에서 속성 창 복원

속성 창이 다시 표시됩니다. 이 창은 Chrome 84에서 지원 중단되었습니다. 향후 DevTools 버전에서는 요소의 속성을 검사하는 워크플로를 개선할 예정입니다.

요소 패널의 속성 창

Chromium 문제: 1105205, 1116085

네트워크 패널의 사람이 읽을 수 있는 X-Client-Data 헤더 값

이제 DevTools는 Network 패널에서 네트워크 리소스를 검사할 때 Headers 창의 모든 X-Client-Data 헤더 값을 코드로 형식 지정합니다.

X-Client-Data HTTP 헤더에는 브라우저에서 사용 설정된 실험 ID 및 Chrome 플래그 목록이 포함되어 있습니다. 원시 헤더 값은 base64로 인코딩된 직렬화된 프로토콜 버퍼이므로 불투명한 문자열처럼 보입니다. 이제 DevTools에서 개발자가 콘텐츠를 더 투명하게 볼 수 있도록 디코딩된 값을 표시합니다.

사람이 읽을 수 있는 `X-Client-Data` 헤더 값

Chromium 문제: 1103854

스타일 창에서 맞춤 글꼴 자동 완성

이제 스타일 창에서 font-family 속성을 수정할 때 가져온 글꼴이 CSS 자동 완성 목록에 추가됩니다.

이 예에서 'Noto Sans'는 로컬 머신에 설치된 맞춤 글꼴입니다. CSS 자동 완성 목록에 표시됩니다. 이전에는 그렇지 않았습니다.

맞춤 글꼴 자동 완성

Chromium 문제: 1106221

네트워크 패널에 리소스 유형을 일관되게 표시

이제 DevTools는 원래 네트워크 요청과 동일한 리소스 유형을 일관되게 표시하고 리디렉션 (상태 302)이 발생하면 Type 열 값에 / Redirect를 추가합니다.

이전에는 DevTools에서 유형을 Other로 변경하는 경우가 있었습니다.

리디렉션 리소스 유형 표시

Chromium 문제: 997694

요소 및 네트워크 패널의 지우기 버튼

이제 스타일 창 및 네트워크 패널의 필터 텍스트 상자와 요소 패널의 DOM 검색 텍스트 상자에 지우기 버튼이 있습니다. 지우기를 클릭하면 입력한 텍스트가 모두 삭제됩니다.

요소 및 네트워크 패널의 지우기 버튼

Chromium 문제: 1067184

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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