DevTools의 새로운 기능 (Chrome 105)

Jecelyn Yeen

Recorder에서 단계별로 다시 재생

이제 Recorder 패널에서 중단점을 설정하고 사용자 플로우를 단계별로 재생할 수 있습니다.

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

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

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

Recorder에서 단계별로 다시 재생

Chromium 문제: 1257499

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를 설치합니다. 프로토콜 핸들러 섹션에 '아메리카노'를 입력하고 프로토콜 테스트를 클릭하여 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 @규칙을 보고 수정할 수 있습니다.

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

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

스타일 창의 규칙에 있는 @scope

Chromium 문제: 1337777

소스 맵 개선

전반적인 디버깅 환경을 개선하기 위해 소스 맵에 적용된 몇 가지 수정사항은 다음과 같습니다.

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

Chromium 문제: 1335338, 1333411

기타 하이라이트

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

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

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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