이 페이지는 Cloud Translation API를 통해 번역되었습니다.

DevTools의 새로운 기능 (Chrome 104)

Jecelyn Yeen

디버깅 중에 프레임 다시 시작

프레임 다시 시작 기능이 돌아왔습니다. 함수의 어딘가에서 일시중지되면 위 코드를 다시 실행할 수 있습니다. 이전에는 이 기능이 안정성 문제로 인해 Chrome 92에서 지원 중단되었으며 삭제되었습니다.

이 예에서는 디버거가 toggleColorScheme 함수의 끝부분 근처에 있는 중단점 (343번 줄)에서 일시중지되었습니다. toggleColorScheme 함수의 시작 부분에서 디버깅을 다시 시작하려면 Debugger 창에서 Call stack(호출 스택) 섹션을 펼치고 toggleColorScheme를 마우스 오른쪽 버튼으로 클릭한 다음 Restart frame을 선택합니다.

디버깅 중에 프레임 다시 시작

Chromium 문제: 1303521

Recorder 패널의 느린 재생 옵션

이제 사용자 플로우를 느린 속도, 매우 느린 속도, 매우 느린 속도로 재생할 수 있습니다. 이러한 옵션을 사용하면 화면에서 각 단계 재생을 더 잘 관찰할 수 있습니다.

Recorder 패널을 열고 새 녹음을 시작합니다. 녹화가 완료되면 Replay 드롭다운 버튼을 클릭합니다. 다시보기를 시작하려면 속도를 선택하세요.

Recorder 패널의 느린 재생 옵션

Chromium 문제: 1306756

Recorder 패널의 확장 프로그램 빌드

이제 Chrome 확장 프로그램을 빌드하거나 설치하여 재생 스크립트를 원하는 형식으로 내보낼 수 있습니다. 빌드 방법을 알아보려면 Recorder 확장 API 문서를 참고하세요.

데모 확장 프로그램을 설치하려면 문서에 설명된 이 단계를 따르세요.

Recorder 패널의 맞춤 확장 프로그램

Chromium 문제: 1325751

소스 패널에서 작성됨 / 배포됨별로 파일 그룹화

Source 패널에서 파일을 정리하려면 새로운 Group files by Authored / Deployed(작성됨/배포된 파일별로 그룹화) 옵션을 사용 설정합니다. 프레임워크 (예: React, Angular)로 웹 애플리케이션을 개발할 때 빌드 도구 (예: Webpack, Vite)에서 생성되는 축소된 파일 때문에 소스 파일을 탐색하기 어려울 수 있습니다.

이 체크박스를 사용하면 파일을 두 가지 카테고리로 그룹화하여 더 빠르게 파일을 검색할 수 있습니다.

작성됨. IDE에서 보는 소스 파일과 유사합니다. DevTools는 (빌드 도구에서 제공) 소스 맵을 기반으로 이러한 파일을 생성합니다.
배포됨. 브라우저가 읽는 실제 파일입니다. 일반적으로 이러한 파일은 축소되어 있습니다.

이 React 데모로 직접 사용해 보세요.

소스 패널에서 작성됨 / 배포됨별로 파일 그룹화

Chromium 문제: 960909

실적 통계 패널의 새로운 사용자 시간 추적

실적 통계 패널의 새로운 사용자 시간 트랙으로 기록의 performance.measure() 표시를 시각화하세요.

예를 들어 이 웹페이지는 performance.measure() 메서드를 사용하여 텍스트 로드의 경과 시간을 계산합니다.

페이지 로드 측정을 시작하면 사용자 시간 트랙이 기록에 표시됩니다. 타이밍 항목을 클릭하여 측면 창에서 세부정보를 확인합니다.

실적 통계 패널의 사용자 시간 추적

Chromium 문제: 1322808

요소의 할당된 슬롯 표시

요소 패널의 슬롯이 있는 요소에는 새로운 slot 배지가 있습니다. 레이아웃 문제를 디버깅할 때 이 기능을 사용하여 노드의 레이아웃에 영향을 미치는 요소를 더 빠르게 식별합니다.

이 예에는 이름이 지정된 슬롯이 몇 개 있는 카드가 포함되어 있습니다. 카드의 person-occupation 슬롯을 검사하고 옆에 있는 slot 배지를 클릭하여 할당된 슬롯을 표시합니다.

<template> 및 <slot> 요소를 사용하여 웹 구성요소의 Shadow DOM을 채우는 데 사용할 수 있는 유연한 템플릿을 만드는 방법을 알아보세요.

요소의 할당된 슬롯 표시

Chromium 문제: 1018906

성능 기록을 위한 하드웨어 동시 실행 시뮬레이션

개발자는 Performance 패널의 새로운 하드웨어 동시 실행 설정을 사용하여 navigator.hardwareConcurrency에 의해 보고된 값을 구성할 수 있습니다.

일부 애플리케이션에서는 navigator.hardwareConcurrency를 사용하여 애플리케이션의 동시 로드 수준을 제어합니다(예: Emscripten pthread 풀 크기 제어). 개발자는 이 기능을 사용하여 다양한 코어 수로 애플리케이션 성능을 테스트할 수 있습니다.

성능 기록을 위한 하드웨어 동시 실행 시뮬레이션

Chromium 문제: 1297439

CSS 변수 자동 완성 시 색상이 아닌 값 미리보기

CSS 변수를 자동 완성할 때 DevTools는 이제 색상이 아닌 변수를 의미 있는 값으로 채우므로, 값이 노드에서 어떤 종류의 변화를 갖게 될지 미리 볼 수 있습니다.

CSS 변수 자동 완성 시 색상이 아닌 값 미리보기

Chromium 문제: 1285091

뒤로-앞으로 캐시 창에서 차단 프레임 식별

Application 패널의 뒤로-앞으로 캐시 창에는 페이지에서 bfcache를 사용하지 못하게 하는 차단 프레임을 식별하는 데 도움이 되는 새로운 frames 섹션이 있습니다.

뒤로-앞으로 캐시 창에서 차단 프레임 식별

Chromium 문제: 1288158

JavaScript 객체의 자동 완성 추천 개선

이제 자바스크립트 객체 속성의 자동 완성이 다음 순서에 따라 표시됩니다.

열거 가능한 속성 소유
열거 불가능한 속성 소유
상속된 열거 가능 속성
열거 불가능한 상속된 속성

이전에는 제안이 상속된 속성보다 자체 속성만 선호하고 모든 상속된 속성에 동일한 우선순위가 부여되었기 때문에 개발자는 관련 속성을 찾기가 더 어려웠습니다.

JavaScript 객체의 자동 완성 추천 개선

Chromium 문제: 1299241

소스 맵 개선

다음은 전체 디버깅 환경을 개선하기 위해 소스 맵에서 수정되었습니다.

이제 중단점이 sourceURL 주석과 함께 인라인 <script>에서 작동합니다.
이제 디버거가 소스 맵을 사용하여 범위 뷰의 블록 범위 변수를 확인합니다.
이제 디버거가 소스 맵을 사용하여 Scope 뷰의 화살표 함수에 있는 변수를 확인합니다.

Chromium 문제: 1329113, 1322115

기타 주요 정보

다음은 이번 버전에서 주목할 만한 수정사항입니다.

소스 패널의 자동 완성 설정을 해결합니다. 이전에는 설정이 사용 중지되어 있어도 자동 완성 기능이 항상 사용 설정되어 있었습니다. (1323286)
최신 색 구성표 형식을 파싱하도록 Application 패널의 Manifest 탭을 업데이트했습니다. (1318305)
성능 통계 패널의 <script async> 렌더링 차단 문제에 관한 추천이 개선되었습니다. 이전에는 스크립트가 이미 비동기로 표시되어 있지만 DevTools가 add async attribute to the script tag를 제안했습니다. (1334096)
이제 성능 통계 패널에서 iframe을 레이아웃 변경의 잠재적 원인으로 감지합니다. 세부정보 창에서 iframe 세부정보를 볼 수 있습니다. (1328873)
명령 메뉴에서 파일을 열 때 이제 작성한 파일 (소스 맵에서 생성된 파일)의 순위가 더 높아져서 유사한 이름의 배포된 스크립트 위에 표시됩니다. (1312929)

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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