DevTools의 새로운 기능 (Chrome 117)

Sofia Emelianova
Sofia Emelianova

네트워크 패널 개선

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

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

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

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

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

폴더를 선택하고 상단의 작업 표시줄에서 액세스를 허용하세요.

재정의가 설정되면 DevTools는 소스 > 재정의 > 편집기를 사용하면 웹 콘텐츠를 재정의할 수 있습니다.

재정의된 리소스는 Network 패널에 저장했습니다.로 표시됩니다. 아이콘 위로 마우스를 가져가면 재정의된 내용을 확인할 수 있습니다.

Network 패널의 요청 옆에 있는 재정의 아이콘

Chromium 문제: 1465785, 1470532, 1469359

XHR 및 가져오기 요청의 내용 재정의

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

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

Chromium 문제: 792101, 1469776

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

작성한 코드에 집중하고 Chrome에 설치했을 수 있는 확장 프로그램에서 보낸 관련 없는 요청을 필터링할 수 있도록 Network 패널에 새로운 필터가 추가됩니다.

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

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

Chromium 문제: 1257885, 1458803

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

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

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

요청 표에서 상태 코드 위로 마우스를 가져가면 동일한 텍스트가 표시됩니다.

Chromium 문제: 1153956

JSON 하위유형의 Pretty-print 응답

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

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

Chromium 문제: 406900

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

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

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

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

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

Chromium 문제: 1463901, 1380964

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

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

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

또한 설정을 탭합니다. 설정 > 환경설정 > 체크박스입니다. 사이드바에 파일 자동 표시도 이제 기본적으로 사용 설정됩니다.

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

Chromium 문제: 1459193, 1336599

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

개인 정보 보호가 강화된 웹을 빌드하고 다른 브라우저의 업데이트와 동시에 Chrome은 개인 정보 보호 샌드박스 이니셔티브를 도입했습니다. 이 이니셔티브는 웹의 개인 정보 보호를 근본적으로 개선하고 서드 파티 쿠키를 더 이상 사용하지 않는 방식으로 건전한 광고 지원 웹을 유지할 수 있습니다. 개인 정보 보호 샌드박스는 변화에 편안하게 적응할 수 있도록 점진적인 단계적 지원 중단 타임라인을 갖추고 있습니다.

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

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

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

기존 Chrome 사용자에게 예정된 단계적 중단에 관한 쿠키 경고를 확인하려면 이 체크박스를 선택하세요.

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

문제 탭에 보고된 서드 파티 쿠키 문제입니다.

또한 Network 패널의 체크박스입니다. 차단된 응답 쿠키 필터가 차단된 응답 쿠키만 표시된다는 점을 명확히 하기 위해 다른 표현으로 변경되었습니다.

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

Chromium 문제: 1458839, 1462693, 1466310

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

Chrome팀은 사용자가 이동할 가능성이 높은 향후 페이지에 완전한 사전 렌더링을 다시 지원합니다. 이를 디버그할 수 있도록 DevTools는 Application 패널에 Preloading 섹션을 추가합니다. 새로운 미리 가져오기 및 사전 렌더링('탐색 미리 로드'로 통칭)은 링크 기반 리소스 힌트가 아닌 Speculation Rules 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

기타 주요 정보

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

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

새로운 실험 기능

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

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

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

Chromium 문제: 1424879

향상된 프로토콜 모니터

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

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

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

CDP 명령어 지정 및 전송

Chromium 문제: 1469345

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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

DevTools의 새로운 기능

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