DevTools의 새로운 기능 (Chrome 86)

Jecelyn Yeen

새 미디어 패널

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

새 미디어 패널

DevTools의 새 미디어 패널 이전에는 동영상 플레이어에 관한 로깅 및 디버그 정보를 chrome://media-internals에 있습니다.

새로운 미디어 패널을 사용하면 이벤트, 로그, 속성, 프레임 타임라인을 더 쉽게 볼 수 있습니다. 동영상 플레이어 자체와 동일한 브라우저 탭에서 디코딩됩니다. Google Cloud 콘솔에서 잠재적 문제를 더 신속하게 처리합니다 (예: 드롭된 프레임이 발생하는 이유, JavaScript가 플레이어에게 예기치 않은 방식으로 발생하는 경우).

Chromium 문제: 1018414

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

이제 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 미디어 쿼리를 에뮬레이션할 수 있습니다.

Preferreds-reduced-data 에뮬레이션

Chromium 문제: 1096068

새로운 JavaScript 기능 지원

이제 DevTools에서 일부 최신 JavaScript 언어 기능을 더 잘 지원합니다.

  • 논리적 할당 연산자 - 이제 DevTools에서 새로운 연산자 &&=, ||=, ??=를 사용합니다.
  • 숫자 구분자 Pretty 출력 - 이제 DevTools가 숫자 구분자를 올바르게 인쇄합니다. 를 클릭합니다.

Chromium 문제: 1086817, 1080569

Lighthouse 패널의 Lighthouse 6.2

이제 Lighthouse 패널에서 Lighthouse 6.2를 실행합니다. 전체 내용은 출시 노트에서 확인하세요. 변경사항 목록입니다.

이미지 크기 조정 안함

Lighthouse 6.2의 새로운 감사:

  • 긴 기본 스레드 작업을 피합니다. 기본 스레드에서 가장 긴 작업을 보고하며, 입력 지연의 최악의 원인을 식별합니다.
  • 링크를 크롤링할 수 있습니다. 앵커 요소의 href 속성이 링크가 검색될 수 있도록 합니다
  • 크기가 지정되지 않은 이미지 요소 - 이미지 요소에 명시적인 width 및 height가 설정되어 있는지 확인합니다. 선정적인 이미지 크기는 레이아웃 변경을 줄이고 CLS를 개선할 수 있습니다.
  • 합성되지 않은 애니메이션을 피하세요. 버벅거림이 나고 버벅거림이 많아 보이는 합성되지 않은 애니메이션을 보고합니다. CLS를 줄일 수 있습니다
  • unload 이벤트를 수신 대기합니다. unload 이벤트를 보고합니다. pagehide 또는 대신 visibilitychange 이벤트를 사용해야 합니다. unload 이벤트가 안정적으로 실행되지 않기 때문입니다.

Lighthouse 6.2의 감사 업데이트:

  • 사용하지 않는 JavaScript를 삭제합니다. 이제 Lighthouse는 페이지에 오류가 있는 경우 감사를 개선합니다. 자바스크립트 소스 맵을 사용할 수 있습니다.

Chromium 문제: 772558

'다른 출처' 지원 중단 서비스 워커 창에 나열

이제 DevTools가 다른 출처에서 온 서비스 워커의 전체 목록을 새 브라우저 탭 - chrome://serviceworker-internals/?devtools.

이전에는 DevTools에서 Application 패널 아래에 중첩된 목록이 표시되었습니다. > 서비스 워커 창을 닫을 수 있습니다.

다른 출처에 대한 링크

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

Application 패널의 새로운 프레임 세부정보 뷰

이제 DevTools가 각 프레임의 상세 뷰를 표시합니다. Frames 아래의 프레임을 클릭하여 액세스합니다. 메뉴에서 Application(애플리케이션) 메뉴로 이동합니다.

Application 패널의 새로운 프레임 세부정보 뷰

Chromium 문제: 1093247

열린 창의 프레임 세부정보

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

열린 창 프레임 세부정보

Chromium 문제: 1107766

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

DevTools는 이제 보안 컨텍스트인 Cross-Origin-Embedder-Policy (COEP) 및 COOP (Cross-Origin-Opener-Policy)가 표시됩니다.

보안 및 격리 정보

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

Chromium 문제: 1051466

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

Styles 창에서 액세스할 수 있는 색상 제안

이제 DevTools에서 저색 대비 텍스트를 위한 색상 제안을 제공합니다.

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

Chromium 문제: 1093227

Elements 패널에서 Properties 창 복구

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

요소 패널의 속성 창

Chromium 문제: 1105205, 1116085

Network 패널에서 인간이 읽을 수 있는 X-Client-Data 헤더 값

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

X-Client-Data HTTP 헤더에는 사용 설정된 실험 ID 및 Chrome 플래그 목록이 포함되어 있습니다. 를 클릭합니다. 원시 헤더 값은 base-64로 인코딩되므로 불투명 문자열처럼 보입니다. 직렬화된 프로토콜 버퍼입니다. 개발자에게 콘텐츠를 더 투명하게 만들기 위해 DevTools는 디코딩된 값을 표시합니다.

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

Chromium 문제: 1103854

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

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

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

맞춤 글꼴 자동 완성

Chromium 문제: 1106221

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

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

이전에는 DevTools에서 가끔 유형을 Other로 변경했습니다.

디스플레이 리디렉션 리소스 유형

Chromium 문제: 997694

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

DOM 검색 텍스트 및 Styles 창 및 Network 패널의 필터 텍스트 상자 요소 패널에 지우기 버튼이 추가되었습니다. 지우기를 클릭하면 표시됩니다.

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

Chromium 문제: 1067184

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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

DevTools의 새로운 기능

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