DevTools의 새로운 기능 (Chrome 86)

New Media(새 미디어) 패널

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

New Media(새 미디어) 패널

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

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

Chromium 문제: 1018414

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

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

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

노드 스크린샷 캡처

Chromium 문제: 1100253

문제 탭 업데이트

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

콘솔 메시지의 문제

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

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

Chromium 문제: 1096481, 1068116, 1080589

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

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

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

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

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

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

  • 디자인 도구를 위한 로컬 글꼴
  • 코드용 웹 글꼴

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

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

Chromium 문제: 384968

비활성 사용자 에뮬레이션

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

비활성 사용자 에뮬레이션

Chromium 문제: 1090802

prefers-reduced-data 에뮬레이션

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

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

Preferreds-reduced-data 에뮬레이션

Chromium 문제: 1096068

새로운 JavaScript 기능 지원

DevTools는 이제 몇 가지 최신 JavaScript 언어 기능을 더욱 효율적으로 지원합니다.

  • 논리 할당 연산자 - 이제 DevTools가 Console 및 소스 패널에서 새 연산자 &&=, ||=, ??=를 사용한 논리적 할당을 지원합니다.
  • 깔끔하게 인쇄된 숫자 구분 기호 - 이제 DevTools가 Sources 패널의 숫자 구분자를 올바르게 예쁘게 인쇄합니다.

Chromium 문제: 1086817, 1080569

Lighthouse 패널의 Lighthouse 6.2

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

이미지 크기 조정

Lighthouse 6.2의 새로운 감사:

  • 긴 기본 스레드 작업을 피합니다. 기본 스레드에서 가장 긴 작업을 보고합니다. 입력 지연의 최악의 원인을 식별하는 데 유용합니다.
  • 링크는 크롤링할 수 있습니다. 링크를 찾을 수 있도록 앵커 요소의 href 속성이 적절한 대상에 연결되어 있는지 확인합니다.
  • 크기가 지정되지 않은 이미지 요소 - 이미지 요소에 명시적인 widthheight가 설정되어 있는지 확인합니다. 선정적인 이미지 크기를 사용하면 레이아웃 변경을 줄이고 CLS를 개선할 수 있습니다.
  • 합성되지 않은 애니메이션을 사용하지 않습니다. 버벅거리는 것처럼 보이고 CLS를 줄이는 합성되지 않은 애니메이션을 보고합니다.
  • unload 이벤트를 리슨합니다. unload 이벤트를 보고합니다. unload 이벤트는 안정적으로 실행되지 않으므로 대신 pagehide 또는 visibilitychange 이벤트를 사용해 보세요.

Lighthouse 6.2의 업데이트된 감사:

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

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에서 각 프레임에 관한 세부정보를 표시합니다. 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에는 저대비 텍스트가 있습니다. 이를 수정하려면 Styles 창에서 color 속성의 색상 선택 도구를 엽니다. 대비율 섹션을 펼치면 DevTools에서 AA 및 AAA 색상 추천을 제공합니다. 추천 색상을 클릭하여 색상을 적용합니다.

Chromium 문제: 1093227

요소 패널에서 속성 창 복구

Chrome 84에서 지원 중단된 속성 창이 다시 돌아왔습니다. DevTools의 향후 버전에서는 요소의 속성 검사 워크플로를 개선할 예정입니다.

Elements 패널의 속성 창

Chromium 문제: 1105205, 1116085

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

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

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

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

Chromium 문제: 1103854

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

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

이 예에서 'Noto Sans'는 로컬 머신에 설치된 맞춤 글꼴입니다. CSS 완료 목록에 표시됩니다. 이전에는 없었습니다.

맞춤 글꼴 자동 완성

Chromium 문제: 1106221

Network 패널에 리소스 유형을 일관되게 표시

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

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

리디렉션 리소스 유형 표시

Chromium 문제: 997694

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

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

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

Chromium 문제: 1067184

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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

DevTools의 새로운 기능

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82가 취소되었습니다.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59