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

DevTools의 새로운 기능 (Chrome 117)

Sofia Emelianova

네트워크 패널 개선

로컬에서 웹 콘텐츠를 더욱 빠르게 재정의

이제 로컬 재정의 기능이 간소화되어 원격 리소스에 액세스하지 않고도 Network 패널에서 원격 리소스의 응답 헤더와 웹 콘텐츠를 쉽게 모의 처리할 수 있습니다.

웹 콘텐츠를 재정의하려면 네트워크 패널을 열고 요청을 마우스 오른쪽 버튼으로 클릭한 다음 콘텐츠 재정의를 선택합니다.

요청의 드롭다운 메뉴에 있는 재정의 옵션

로컬 재정의를 설정했지만 비활성화한 경우 DevTools에서 이를 사용 설정합니다. 아직 설정하지 않은 경우 DevTools가 상단의 작업 모음에 메시지를 표시합니다. 재정의를 저장할 폴더를 선택하고 DevTools에서 액세스하도록 허용합니다.

폴더를 선택하고 상단의 작업 표시줄에서 폴더에 대한 액세스를 허용합니다.

재정의가 설정되면 DevTools에서 Sources > Overrides > Editor로 이동하여 웹 콘텐츠를 재정의할 수 있습니다.

재정의된 리소스는 Network 패널에 로 표시됩니다. 아이콘 위로 마우스를 가져가면 재정의된 항목이 표시됩니다.

Chromium 문제: 1465785, 1470532, 1469359.

XHR 및 가져오기 요청의 콘텐츠 재정의

이제 응답 헤더 외에도 XHR의 콘텐츠와 가져오기 요청을 재정의할 수 있습니다. 이러한 재정의를 사용하면 백엔드 및 API가 아직 준비되지 않은 경우에도 API 응답을 모의 처리하여 웹페이지를 디버그할 수 있습니다.

현재 DevTools는 이미지 (예: avif, png), 글꼴, 가져오기 및 XHR, 스크립트 (css 및 js), 문서 (html)와 같은 요청 유형에 대해 콘텐츠 재정의를 지원합니다. 이제 DevTools에서 지원되지 않는 유형에 대해 콘텐츠 재정의 옵션을 비활성화합니다.

Chromium 문제: 792101, 1469776

Chrome 확장 프로그램 요청 숨기기

사용자가 작성하는 코드에 집중하고 Chrome에 설치했을 수 있는 확장 프로그램에서 전송된 관련 없는 요청을 필터링할 수 있도록 네트워크 패널에 새로운 필터가 추가되었습니다.

chrome-extension:// URL로 전송된 모든 요청을 필터링하려면 확장 프로그램 URL 숨기기를 선택합니다.

요청 표에 표시되지 않는 확장 프로그램 URL입니다.

Chromium 문제: 1257885, 1458803

사람이 읽을 수 있는 HTTP 상태 코드

이제 요청 헤더의 상태 코드에서 HTTP 상태 코드 옆에 사람이 읽을 수 있는 텍스트를 표시하므로 요청이 어떻게 처리되었는지 더 빠르게 파악할 수 있습니다.

사람이 읽을 수 있는 HTTP 상태 코드를 표시하기 전과 후입니다.

요청 표의 상태 코드 위로 마우스를 가져가면 동일한 텍스트를 확인할 수 있습니다.

Chromium 문제: 1153956.

JSON 하위유형의 응답을 보기 편하게 인쇄

이제 application/[subtype]+json MIME 하위유형 (예: ld+json, hal+json 등)이 있는 요청의 응답 탭에서 응답을 올바르게 파싱하여 응답을 꾸밀 수 있습니다.

네트워크 응답 미리보기에서 애플리케이션/json 하위유형을 파싱하기 전과 후입니다.

Chromium 문제: 406900

성능: 네트워크 이벤트의 가져오기 우선순위 변경사항 확인

이제 실적 패널에는 네트워크 트랙의 이벤트 요약에 단일 우선순위 대신 초기 우선순위와 (최종) 우선순위 필드 두 개가 표시됩니다. 이 추가 필드를 사용하여 이벤트의 가져오기 우선순위가 변경되는지 확인하고 다운로드 순서를 조정할 수 있습니다. 자세한 내용은 Fetch Priority API로 리소스 로드 최적화를 참조하세요.

가져오기 우선순위의 변경사항을 표시하기 전과 후

또한 네트워크 패널의 우선순위 열에서 대규모 요청 행 설정을 사용 설정한 상태에서 동일한 정보를 찾을 수 있습니다.

네트워크 패널의 우선순위 열

Chromium 문제: 1463901, 1380964.

기본적으로 사용 설정된 소스 설정: 코드 폴딩 및 자동 파일 표시

이제 설정 > 환경설정 > 코드 폴딩 옵션이 기본적으로 사용 설정됩니다. 이 옵션을 사용하면 코드 블록을 접을 수 있습니다.

코드 블록을 접으려면 블록 시작 부분 옆에 있는 줄 번호 위로 마우스를 가져간 후 접기 아이콘을 클릭합니다. {...} 아이콘을 클릭하여 블록을 다시 펼칩니다.

또한 설정 > 환경설정 > 사이드바에 파일 자동 표시도 이제 기본적으로 사용 설정됩니다.

이 설정을 사용하면 탭을 전환할 때 소스 > 페이지의 파일 트리에서 편집기에 열려 있는 현재 파일이 선택됩니다.

Chromium 문제: 1459193, 1336599

서드 파티 쿠키 문제 디버깅 개선

개인 정보 보호를 강화한 웹을 구축하고 다른 브라우저의 업데이트와 동시에 진행되도록 Chrome에서는 개인 정보 보호 샌드박스 이니셔티브를 도입했습니다. 이 이니셔티브는 웹의 개인 정보 보호를 근본적으로 개선하고, 서드 파티 쿠키를 폐기하는 방식으로 건전한 광고 지원 웹을 유지할 수 있습니다. 개인 정보 보호 샌드박스는 변화에 능숙하게 적응할 수 있도록 점진적인 단계적 중단 타임라인을 갖추고 있습니다.

서드 파티 쿠키의 단계적 지원 중단 후에 이미 Chrome의 작동 방식을 테스트할 수 있습니다. 이렇게 하려면 명령줄에서 Chrome을 --test-third-party-cookies-phaseout 플래그로 실행합니다. 이 플래그의 기능에 대해 자세히 알아보려면 쿠키 디버깅을 참조하세요.

Chrome을 실행하는 방식 (플래그 유무와 관계없음)에 관계없이 이제 문제 탭에는 모든 신규 Chrome 사용자에게 서드 파티 쿠키 문제 포함 체크박스가 기본적으로 사용 설정되어 있으며 이에 따라 다음 보고서가 표시됩니다.

예정된 단계적 중단에 대한 브레이킹 체인지 경고
서드 파티 쿠키와 관련된 문제

향후 단계적 중단에 대한 쿠키 경고를 기존 Chrome 사용자에게 표시하려면 이 체크박스를 선택하세요.

이를 테스트하려면 이 데모 페이지에서 쿠키를 검사하세요.

문제 탭에 보고된 서드 파티 쿠키 문제

또한 차단된 응답 쿠키만 표시되도록 네트워크 패널의 차단된 응답 쿠키 필터를 다르게 표현했습니다.

체크박스가 사용 설정되고 차단된 응답 쿠키가 있는 요청만 표시됩니다.

Chromium 문제: 1458839, 1462693, 1466310.

Application 패널에서 디버그 미리 로드

Chrome팀은 사용자가 나중에 이동할 가능성이 있는 페이지의 전체 사전 렌더링을 다시 사용합니다. 디버그할 수 있도록 DevTools가 Application 패널에 Preloading 섹션을 추가합니다. 새로운 미리 가져오기 및 사전 렌더링('탐색 사전 로드'로 통칭)은 링크 기반 리소스 힌트가 아닌 Speculation Rules API를 사용합니다.

이 데모 페이지의 애플리케이션 > 미리 로드 섹션에서 다음을 검사할 수 있습니다.

Speculation Rules: 현재 페이지에서 찾은 모든 규칙 세트가 나열됩니다.
미리 로드: 규칙 집합에서 미리 가져온 URL과 사전 렌더링된 URL을 모두 나열합니다.
이 페이지에는 현재 페이지의 사전 렌더링된 상태가 나열됩니다.

자세한 내용은 예측 규칙 디버깅 전용 게시물을 참조하세요.

Chromium 문제: 1410709

새로운 색상

이미 DevTools의 디자인이 Chrome에 더욱 잘 맞는 모습으로 바뀐 것을 눈치채셨을 것입니다. 기여 요인 중 하나는 새로운 색 구성표입니다.

새 색상을 적용하기 전과 후입니다.

이 버전 (117)에서는 여러 가지 개선된 UI 텍스트를 비롯하여 이미 언급한 바와 같이 DevTools에 더 많은 UX 개선사항을 제공합니다.

Chromium 문제: 1456677

Lighthouse 10.4.0

이제 Lighthouse 패널에서 Lighthouse 10.4.0을 실행합니다. 특히 이 버전에서는 다음에 관해 새로운 접근성 감사가 추가되었습니다.

예를 들면 다음과 같습니다.

링크를 구별할 수 없는 링크 색상을 확인하지 못했습니다.

변경사항 전체 목록도 참고하세요. DevTools에서 Lighthouse 패널 사용과 관련된 기본사항을 알아보려면 Lighthouse: 웹사이트 속도 최적화를 참고하세요.

Chromium 문제: 772558.

DevTools용 C/C++ WebAssembly 디버깅 확장 프로그램이 이제 오픈소스로 제공됩니다.

DevTools용 C/C++ WebAssembly 디버깅 확장 프로그램이 이제 오픈소스로 제공되며 DevTools 프런트엔드 저장소에 있습니다. 이 확장 프로그램을 사용하면 WebAssembly로 컴파일된 C++ 프로그램용 DevTools의 디버깅 기능을 사용할 수 있습니다. 자세한 내용은 C/C++ WebAssembly 디버그를 참고하세요.

확장 프로그램을 빌드, 실행, 테스트하는 방법을 알아보고 언제든지 참여하세요.

Chromium 문제: 1410709

기타 주요 사항

다음은 이번 출시에서 주목할 만한 수정사항 및 개선사항입니다.

CSS 중첩: 이제 Elements 패널에 중첩된 하위 요소의 전체 선택기 체인이 표시됩니다 (1172985).
이제 Application > Manifest에 display_override 값이 있는지 확인하고 관련 문서 링크를 제공하는 Window Controls Overlay 섹션이 있습니다.
이제 소스 > 페이지 트리에서 다음을 포함하되 이에 국한되지 않는 작업을 실행합니다. (1442863)
- 모든 콘텐츠가 무시 목록에 포함된 경우 폴더를 비활성화합니다.
- 모든 콘텐츠가 소스 맵에서 비롯되는 경우 폴더 색상을 주황색으로 지정합니다.
성능: 이제 녹화를 시작하면 캡처 설정이 자동으로 숨겨집니다 (1455498).
Sources > Editor가 Ctrl + Arrow 동작 (Win) 및 Opt + Arrow (MacOs) (1468208)를 복원했습니다.
애니메이션 > 모두 일시중지 전환 버튼이 이제 페이지 로드 전반에서 상태를 유지합니다. (1446046)
애플리케이션 > 저장소 > 캐시 저장소가 애플리케이션 > 저장소 > 캐시 섹션으로 이동했습니다. (1462622)
하드웨어 동시 실행 도움말, 네트워크 필터 텍스트 및 기본 메뉴 옵션, 애플리케이션 트리 보기의 대소문자, 네트워크 > 헤더 텍스트, 소스 > 재정의 및 파일 시스템 텍스트 등 일부 UI 텍스트와 도움말이 개선되었습니다.

새로운 실험 기능

새 렌더링 에뮬레이션: `prefers-reduced-transparency`

웹사이트 사용자는 기기에서 새로운 실험용 prefers-reduced-transparency CSS 미디어 기능을 사용 설정하여 투명한 효과를 줄이기 위해 선호하는 사항을 표시할 수 있습니다. 웹사이트의 접근성을 높이려면 이 환경설정을 고려해 보세요. 이제 렌더링 창 탭에서 prefers-reduced-transparency: reduce 설정을 에뮬레이션할 수 있으므로 솔루션의 프로토타입을 만들고 이 경우 웹사이트가 어떻게 동작하는지 테스트할 수 있습니다.

Chrome에서 이 기능을 테스트하려면 chrome://flags에서 웹 플랫폼 실험용 기능을 사용 설정하세요.

Chromium 문제: 1424879

향상된 프로토콜 모니터

Chrome DevTools는 Chrome DevTools 프로토콜 (CDP)을 사용하여 Chrome 브라우저를 계측, 검사, 디버그, 프로파일링합니다. Chromium 또는 DevTools 개발자는 프로토콜 모니터를 사용하여 DevTools의 모든 CDP 요청 및 응답을 보고 CDP 명령어를 전송할 수 있습니다.

프로토콜 모니터에 CDP 명령어를 더 쉽게 구성하고 전송할 수 있는 새로운 인터페이스가 도입되었습니다. 이제 문서에서 명령어와 매개변수를 찾을 필요가 없으므로 DevTools가 이를 추천합니다.

프로토콜 모니터 창 탭의 오른쪽 하단에서 CDP 명령어 편집기 표시를 클릭하고 대상을 선택하고 명령어 입력을 시작한 다음 필요한 경우 추천된 명령어 중 하나를 선택하고 매개변수 값을 지정한 다음 명령어 보내기 (Ctrl/Cmd + Enter)를 클릭합니다.

CDP 명령어 지정 및 전송

Chromium 문제: 1469345

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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