DevTools의 새로운 기능 (Chrome 86)

새 미디어 패널

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

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

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

Chromium 문제: 1018414

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

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

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

Chromium 문제: 1100253

문제 탭 업데이트

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

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

Chromium 문제: 1096481, 1068116, 1080589

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

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

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

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

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

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

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

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

Chromium 문제: 384968

비활성 사용자 에뮬레이션

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

Chromium 문제: 1090802

prefers-reduced-data 에뮬레이션

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

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

Chromium 문제: 1096068

새 JavaScript 기능 지원

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

• 논리 할당 연산자 - 이제 DevTools는 콘솔 및 소스 패널에서 새로운 연산자 &&=, ||=, ??=를 사용한 논리 할당을 지원합니다.
• 숫자 구분자 예쁘게 인쇄 - 이제 DevTools가 소스 패널에서 숫자 구분자를 올바르게 예쁘게 인쇄합니다.

Chromium 문제: 1086817, 1080569

Lighthouse 패널의 Lighthouse 6.2

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

Lighthouse 6.2의 새로운 감사:

• 긴 기본 스레드 작업 피하기 기본 스레드의 가장 긴 작업을 보고합니다. 입력 지연을 가장 많이 유발하는 작업을 찾을 때 용이합니다.
• 링크를 크롤링할 수 있음 앵커 요소의 href 속성이 적절한 대상에 연결되어 링크가 검색될 수 있는지 확인합니다.
• 크기가 지정되지 않은 이미지 요소 - 이미지 요소에 명시적 width 및 height가 설정되어 있는지 확인합니다. 명시적인 이미지 크기는 레이아웃 변경 횟수를 줄이고 누적 레이아웃 변경을 개선할 수 있습니다.
• 합성 작업을 거치지 않은 애니메이션을 지양하세요. 품질이 나쁘고 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

필터링된 항목의 보증 요약 표시

이제 Coverage 탭에 필터를 적용하면 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)

이제 개발자 도구에 프레임 세부정보에 보안 컨텍스트, 교차 출처 삽입자 정책 (COEP) 및 교차 출처 오프너 정책 (COOP)이 표시됩니다.

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

Chromium 문제: 1051466

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

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

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

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

Chromium 문제: 1093227

요소 패널에서 속성 창 복원

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

Chromium 문제: 1105205, 1116085

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

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

X-Client-Data HTTP 헤더에는 브라우저에서 사용 설정된 실험 ID와 Chrome 플래그 목록이 포함됩니다. 원시 헤더 값은 base-64로 인코딩되고 직렬화된 프로토콜 버퍼이므로 불투명한 문자열처럼 보입니다. 개발자에게 콘텐츠를 더 투명하게 표시하기 위해 이제 DevTools에 디코딩된 값이 표시됩니다.

Chromium 문제: 1103854

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

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

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

Chromium 문제: 1106221

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

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

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

Chromium 문제: 997694

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

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

Chromium 문제: 1067184

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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

DevTools의 새로운 기능

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