DevTools의 새로운 기능 (Chrome 105)

Jecelyn Yeen

Recorder의 단계별 재생

이제 Recorder 패널에서 브레이크포인트를 설정하고 사용자 흐름을 단계별로 재생할 수 있습니다.

중단점을 설정하려면 단계 옆에 있는 파란색 점을 클릭합니다. 사용자 흐름을 재생합니다. 재생은 단계를 실행하기 전에 일시중지됩니다. 여기에서 재생을 계속하거나, 단계를 실행하거나, 재생을 취소할 수 있습니다.

이 기능을 사용하면 사용자 흐름을 완전히 시각화하고 쉽게 디버그할 수 있습니다.

자세한 내용은 녹음기 기능 참조를 참고하세요.

Recorder의 단계별 재생

Chromium 문제: 1257499

Recorder 패널에서 마우스 오버 이벤트 지원

이제 녹음기에서 녹화 중에 마우스 오버 (마우스를 가져가기) 단계를 수동으로 추가할 수 있습니다.

이 데모에서는 마우스 오버 시 팝업 메뉴가 표시됩니다. 사용자 흐름을 녹화하고 메뉴 항목을 클릭해 보세요.

이제 사용자 흐름을 재생하면 Recorder가 녹화 중에 마우스 오버 이벤트를 자동으로 캡처하지 않으므로 실패합니다. 이 문제를 해결하려면 메뉴 항목을 클릭하기 전에 선택 도구 위로 마우스를 가져가도록 수동으로 단계를 추가합니다.

녹음기에서 마우스 오버 이벤트 지원

Chromium 문제: 1257499

성능 통계 패널의 최대 콘텐츠 페인트 (LCP)

LCP는 로드 속도 인식을 측정하는 중요한 사용자 중심 측정항목입니다. 이제 최대 콘텐츠 렌더링 시간 (LCP)의 핵심 경로와 근본 원인을 확인할 수 있습니다.

실적 녹화에서 타임라인의 LCP 배지를 클릭합니다. 세부정보 창에서 LCP 점수를 확인하고, LCP 속도를 저하시키는 리소스를 수정하는 방법을 알아보고, LCP 리소스의 중요 경로를 확인할 수 있습니다.

성능 통계에서 패널을 사용하여 실행 가능한 통계를 얻고 웹사이트 성능을 개선하는 방법을 알아보세요.

성능 통계 패널의 LCP

Chromium 문제: 1326481

텍스트 플래시 (FOIT, FOUT)를 레이아웃 변경의 잠재적인 근본 원인으로 식별

이제 실적 통계 패널에서 FOIT (표시되지 않는 텍스트 플래시) 및 FOUT (스타일 지정이 없는 텍스트 플래시)를 레이아웃 이동의 잠재적인 근본 원인으로 감지합니다.

레이아웃 변경의 잠재적 근본 원인을 보려면 레이아웃 변경 트랙에서 스크린샷을 클릭합니다.

레이아웃 전환을 방지하는 기법을 알아보려면 WebFont 로드 및 렌더링 최적화를 참고하세요.

성능 통계 패널의 FOUT

Chromium 문제: 1334628, 1328873

매니페스트 창의 프로토콜 핸들러

이제 DevTools를 사용하여 프로그레시브 웹 앱 (PWA)의 URL 프로토콜 핸들러 등록을 테스트할 수 있습니다.

URL 프로토콜 핸들러 등록을 사용하면 설치된 PWA가 더 통합된 환경을 위해 특정 프로토콜 (예: magnet, web+example)을 사용하는 링크를 처리할 수 있습니다.

애플리케이션 > 매니페스트 창을 통해 프로토콜 핸들러 섹션으로 이동합니다. 여기에서 사용 가능한 모든 프로토콜을 보고 테스트할 수 있습니다.

예를 들어 이 데모 PWA를 설치합니다. 프로토콜 핸들러 섹션에 'americano'를 입력하고 프로토콜 테스트를 클릭하여 PWA에서 커피 페이지를 엽니다.

매니페스트 창의 프로토콜 핸들러

Chromium 문제: 1300613

요소 패널의 최상위 레이어 배지

최상위 레이어 배지를 사용하여 최상위 레이어의 개념을 이해하고 최상위 레이어 콘텐츠가 어떻게 변경되는지 시각화합니다.

<dialog> 요소가 최근에 여러 브라우저에서 안정화되었습니다. 대화상자를 열면 최상위 레이어에 배치됩니다. 최상위 콘텐츠는 다른 모든 콘텐츠 위에 렌더링됩니다.

이 데모에서 대화상자 열기를 클릭합니다.

최상위 레이어 요소를 시각화하는 데 도움이 되도록 DevTools는 DOM 트리에 최상위 레이어 컨테이너 (#top-layer)를 추가합니다. 닫는 </html> 태그 뒤에 있습니다.

최상위 레이어 컨테이너 요소에서 최상위 레이어 트리 요소로 이동하려면 최상위 레이어 컨테이너에서 요소 또는 배경 옆에 있는 표시 버튼을 클릭합니다.

최상위 레이어 트리 요소 (예: 대화상자 요소) 옆에 있는 top-layer 배지를 클릭하여 최상위 레이어 컨테이너로 이동합니다.

요소 패널의 최상위 레이어 배지

Chromium 문제: 1313690

런타임에 Wasm 디버깅 정보 연결

이제 런타임 중에 wasm의 DWARF 디버깅 정보를 첨부할 수 있습니다. 이전에는 소스 패널이 JavaScript 및 Wasm 파일에 소스 맵을 연결하는 작업만 지원했습니다.

소스 패널에서 Wasm 파일을 엽니다. 편집기에서 마우스 오른쪽 버튼을 클릭하고 DWARF 디버그 정보 추가…를 선택하여 디버그 정보를 필요에 따라 연결합니다.

ALT_TEXT_HERE

Chromium 문제: 1341255

디버깅 중 실시간 편집 지원

이제 디버거를 다시 시작하지 않고도 스택의 최상위 함수를 수정할 수 있습니다.

Chrome 104에서는 DevTools에 프레임 다시 시작 기능이 다시 도입되었습니다. 하지만 현재 일시중지된 함수는 수정할 수 없습니다. 개발자는 함수에서 중단한 다음 일시중지된 상태에서 해당 함수를 수정하는 경우가 많습니다.

이 업데이트를 통해 디버거는 다음과 같은 제한사항으로 함수를 자동으로 다시 시작합니다.

  • 일시중지된 동안에는 최상위 함수만 수정할 수 있습니다.
  • 스택 아래에 있는 동일한 함수에 대한 재귀 호출 없음

디버깅 중 실시간 수정

Chromium 문제: 1334484

스타일 창에서 규칙의 @scope 보기 및 수정

이제 스타일 창에서 CSS @scope at-rules를 보고 수정할 수 있습니다.

@scope at 규칙은 CSS 계층 구조 및 상속 6단계 사양의 일부입니다. 이러한 규칙을 사용하면 개발자가 CSS에서 스타일 규칙의 범위를 지정할 수 있습니다.

이 데모 페이지를 열고 <div class=”dark-theme”> 요소 내의 하이퍼링크를 검사합니다. 스타일 창에서 @scope at-rule을 확인합니다. 규칙 선언을 클릭하여 수정합니다.

스타일 창의 규칙에서 @scope

Chromium 문제: 1337777

소스 맵 개선

다음은 전반적인 디버깅 환경을 개선하기 위한 소스 맵의 몇 가지 수정사항입니다.

  • 이제 DevTools에서 구두점을 사용하여 소스 맵 식별자를 올바르게 확인합니다. 일부 최신 미니파이어 (예: esbuild)는 식별자를 후속 구두점 (쉼표, 괄호, 세미콜론)과 병합하는 소스 맵을 생성합니다.
  • 이제 DevTools에서 super 호출을 사용하여 생성자의 소스 맵 이름을 확인합니다. ALT_TEXT_HERE
  • 중복 표준 URL의 소스 맵 URL 색인 생성을 수정했습니다. 이전에는 중복 표준 URL로 인해 일부 파일에서 중단점이 활성화되지 않았습니다.

Chromium 문제: 1335338, 1333411

기타 하이라이트

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

  • 로컬 스토리지 키-값 쌍이 삭제될 때 애플리케이션 > 로컬 스토리지 창의 표에서 로컬 스토리지 키-값 쌍을 올바르게 삭제합니다. (1339280)
  • 이제 소스 패널에서 CSS 파일을 볼 때 색상 미리보기가 올바르게 표시됩니다. 이전에는 위치가 잘못 지정되었습니다. (1340062)
  • 레이아웃 창에 CSS flex 및 그리드 항목을 일관되게 표시하고 요소 패널에 배지로 표시합니다. 이전에는 두 위치 모두에서 플렉스 및 그리드 항목이 무작위로 누락되었습니다. (1340441, 1273992)
  • DevTools에서 프레임에 광고 라벨이 지정된 원인이 된 스크립트를 찾은 경우 광고 프레임에 새 크리에이터 광고 스크립트 링크를 사용할 수 있습니다. 애플리케이션 > 프레임을 통해 프레임을 열 수 있습니다. (1217041)

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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