이 페이지는 Cloud Translation API를 통해 번역되었습니다.

DevTools의 새로운 기능 (Chrome 86)

Jecelyn Yeen

새 미디어 패널

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

새 미디어 패널

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

새 미디어 패널을 사용하면 동영상 플레이어와 동일한 브라우저 탭에서 이벤트, 로그, 속성, 프레임 디코딩 타임라인을 더 쉽게 볼 수 있습니다. 잠재적인 문제를 더 빠르게 보고 검사할 수 있습니다 (예: 드롭된 프레임이 발생하는 이유, 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가 Console 및 소스 패널에서 새로운 연산자 &&=, ||=, ??=를 사용한 논리적 할당을 지원합니다.
숫자 구분자 Pretty 출력 - 이제 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를 삭제합니다. Lighthouse는 이제 페이지에 공개적으로 액세스할 수 있는 JavaScript 소스 맵이 있는 경우 감사를 개선합니다.

Chromium 문제: 772558

서비스 워커 창의 '다른 출처' 등록정보 지원 중단

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

이전에는 DevTools가 Application 패널 > Service worker 창 아래에 중첩된 목록을 표시했습니다.

다른 출처에 대한 링크

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가 각 프레임의 상세 뷰를 표시합니다. Application 패널의 Frames 메뉴에서 프레임을 클릭하여 액세스합니다.

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

Chromium 문제: 1093247

열린 창의 프레임 세부정보

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

열린 창 프레임 세부정보

Chromium 문제: 1107766

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

이제 DevTools에서 프레임 세부정보에 보안 컨텍스트인 COEP (Cross-Origin-Embedder-Policy) 및 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가 이제 Headers 창의 모든 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)이 발생할 때 Type 열 값에 / Redirect을 추가합니다.

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

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

Chromium 문제: 997694

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

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

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

Chromium 문제: 1067184

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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