DevTools의 새로운 기능 (Chrome 117)

네트워크 패널 개선사항

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

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

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

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

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

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

Chromium 문제: 1465785, 1470532, 1469359

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

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

현재 DevTools는 이미지 (예: avif, png), 글꼴, 가져오기 및 XHR, 스크립트 (css 및 js), 문서 (html)와 같은 요청 유형의 콘텐츠 재정의를 지원합니다. 이제 지원되지 않는 유형의 경우 콘텐츠 재정의 옵션이 회색으로 표시됩니다.

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 사용자로서 예정된 단계적 지원 중단에 관한 쿠키 경고를 보려면 이 체크박스를 선택하세요.

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

또한 네트워크 패널의 차단된 응답 쿠키 필터가 차단된 응답 쿠키만 표시한다는 점을 명확하게 나타내도록 문구가 변경되었습니다.

Chromium 문제: 1458839, 1462693, 1466310

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

Chrome팀은 사용자가 탐색할 가능성이 있는 향후 페이지의 전체 사전 렌더링을 다시 도입하고 있습니다. 이 문제를 디버그할 수 있도록 DevTools는 애플리케이션 패널에 미리 로드 섹션을 추가합니다. 새로운 미리 가져오기 및 사전 렌더링('탐색 미리 로드'라고 통칭)은 링크 기반 리소스 힌트 대신 Speculation Rules 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).
• 이제 Application > Manifest에 매니페스트에 display_override 값이 있는지 확인하고 관련 문서 링크를 제공하는 Window Controls Overlay 섹션이 있습니다.
• 이제 소스 > 페이지 트리에서 다음 작업을 실행합니다(이에 국한되지 않음)(1442863).
  • 모든 콘텐츠가 무시 목록에 있는 경우 폴더를 회색으로 표시합니다.
  • 모든 콘텐츠가 소스 맵에서 가져온 경우 폴더를 주황색으로 표시합니다.
• 성능: 이제 녹화를 시작하면 캡처 설정이 자동으로 숨겨집니다 (1455498).
• 소스 > 편집기에서 Ctrl + 화살표 동작 (Windows) 및 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의 새로운 기능 시리즈에서 다룬 모든 항목의 목록입니다.