DevTools의 새로운 기능 (Chrome 117)

네트워크 패널 개선사항

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

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

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

로컬 재정의가 설정되어 있지만 사용 중지된 경우 DevTools에서 사용 설정합니다. 아직 설정하지 않았다면 DevTools 상단의 작업 표시줄에 메시지가 표시됩니다. 재정의를 저장하고 DevTools에서 액세스할 수 있는 폴더를 선택합니다.

재정의가 설정되면 DevTools에서 소스 > 재정의 > 편집기로 이동하여 웹 콘텐츠를 재정의할 수 있습니다.

재정의된 리소스는 네트워크 패널에 로 표시됩니다. 아이콘 위로 마우스를 가져가면 재정의된 항목을 확인할 수 있습니다.

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 숨기기를 선택합니다.

Chromium 문제: 1257885, 1458803

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

이제 요청 헤더의 상태 코드에 HTTP 상태 코드 옆에 사람이 읽을 수 있는 텍스트가 표시되므로 요청에 어떤 일이 발생했는지 더 빠르게 파악할 수 있습니다.

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

Chromium 문제: 1153956

JSON 하위유형의 응답을 읽기 쉽게 출력합니다.

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

Chromium 문제: 406900

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

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

또한 대용량 요청 행 설정을 사용 설정한 네트워크 패널의 우선순위 열에서 동일한 정보를 확인할 수 있습니다.

Chromium 문제: 1463901, 1380964

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

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

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

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

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

Chromium 문제: 1459193, 1336599

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

더욱 안전한 웹을 구축하기 위한 노력의 일환으로, 그리고 다른 브라우저의 업데이트와 동시에 Chrome은 개인 정보 보호 샌드박스 이니셔티브를 도입했습니다. 이 이니셔티브는 웹의 개인 정보 보호를 근본적으로 개선하고 서드 파티 쿠키를 더 이상 사용하지 못하도록 하여 건강한 광고 지원 웹을 유지할 수 있습니다. 개인 정보 보호 샌드박스에는 변경사항에 원활하게 적응할 수 있도록 단계적 지원 중단 타임라인이 있습니다.

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

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

• 예정된 지원 중단에 관한 중대한 변경사항 경고
• 서드 파티 쿠키와 관련된 문제

기존 Chrome 사용자로서 예정된 지원 중단에 관한 쿠키 경고를 보려면 이 체크박스를 선택하세요.

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

또한 네트워크 패널의 차단된 응답 쿠키 필터가 차단된 응답 쿠키만 표시된다는 점을 명확히 하기 위해 문구가 수정되었습니다.

Chromium 문제: 1458839, 1462693, 1466310

애플리케이션 패널에서 미리 로드 디버그

Chrome팀은 사용자가 탐색할 가능성이 높은 향후 페이지의 전체 미리 렌더링을 다시 도입하고 있습니다. 이를 디버그할 수 있도록 DevTools는 Application 패널에 Preloading 섹션을 추가합니다. 새로운 미리 가져오기 및 미리 렌더링 (통칭 '탐색 미리 로드')은 링크 기반 리소스 힌트 대신 추측 규칙 API를 사용합니다.

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

• 현재 페이지에 있는 모든 규칙 집합을 나열하는 추측 규칙
• 규칙 세트에서 미리 가져오고 미리 렌더링된 모든 URL을 나열하는 미리 로드
• 이 페이지: 현재 페이지의 사전 렌더링 상태를 보여줍니다.

자세한 내용은 추측 규칙 디버깅에 관한 전용 게시물을 참고하세요.

Chromium 문제: 1410709

새로운 색상

DevTools의 디자인이 Chrome과 더 잘 조화를 이루도록 업데이트되었음을 이미 눈치채셨을 수도 있습니다. 새로운 색 구성표가 한 가지 원인으로 작용했습니다.

이 버전 (117)에서는 이미 언급되고 나열된 여러 UI 텍스트 개선사항을 비롯하여 DevTools에 더 많은 UX 개선사항이 적용되었습니다.

Chromium 문제: 1456677

Lighthouse 10.4.0

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

• aria-dialog-name
• aria-text
• link-in-text-block
• select-name

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

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

Chromium 문제: 772558

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

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

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

Chromium 문제: 1410709

기타 하이라이트

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

• CSS 중첩: 이제 요소 패널에 중첩된 하위 요소의 전체 선택자 체인이 표시됩니다 (1172985).
• 이제 애플리케이션 > 매니페스트에 display_override 값이 매니페스트에 있는지 확인하고 관련 문서 링크를 제공하는 창 컨트롤 오버레이 섹션이 있습니다.
• 이제 소스 > 페이지 트리가 다음 작업을 실행합니다 (1442863).
  • 모든 콘텐츠가 무시 목록에 있는 폴더는 비활성화됩니다.
  • 모든 콘텐츠가 소스 맵에서 가져온 경우 폴더를 주황색으로 표시합니다.
• 성능: 이제 녹화를 시작하면 캡처 설정이 자동으로 숨겨집니다 (1455498).
• 소스 > 편집기에서 Ctrl + 화살표 동작 (Win) 및 Opt + 화살표 (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)을 클릭합니다.

Chromium 문제: 1469345

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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

DevTools의 새로운 기능

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