DevTools의 새로운 기능 (Chrome 117)

Sofia Emelianova
Sofia Emelianova
GitHub

네트워크 패널 개선

로컬에서 웹 콘텐츠를 더욱 빠르게 재정의할 수 있습니다.

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

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

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

로컬 재정의가 설정되어 있지만 사용 중지된 경우 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 숨기기를 선택합니다.

요청 표에서 확장 프로그램 URL이 숨겨져 있습니다.

Chromium 문제: 1257885, 1458803

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

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

사람이 읽을 수 있는 HTTP 상태 코드 표시 전과 후

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

Chromium 문제: 1153956

JSON 하위유형의 Pretty-print 응답

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

네트워크 응답 미리보기에서 application/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

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

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

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

  • 예측 규칙: 현재 페이지에서 찾은 모든 규칙 집합을 나열합니다.
  • 미리 로드: 규칙 집합에서 미리 가져온 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

기타 하이라이트

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

새로운 실험적 기능

새로운 렌더링 에뮬레이션: 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, Dev 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 미리보기 채널을 통해 최신 DevTools 기능에 액세스할 수 있고, 최첨단 웹 플랫폼 API를 테스트할 수 있으며, 사용자보다 먼저 사이트에서 문제를 발견할 수 있습니다.

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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