이 페이지는 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

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

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

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

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

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

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

Chromium 문제: 960909

성능 통계 패널의 신규 사용자 시간 추적

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

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

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

성능 통계 패널에서 사용자 시간 추적

Chromium 문제: 1322808

요소의 할당된 슬롯 표시

Elements 패널의 슬롯 요소에는 새로운 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 객체에 대한 자동 완성 추천 개선

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

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

이전에는 개발자가 관련 속성을 찾기가 더 어려웠습니다. 추천이 상속된 속성보다 자체 속성만을 선호하고 상속된 모든 속성에 동일한 우선순위가 주어졌기 때문입니다.

JavaScript 객체에 대한 자동 완성 추천 개선

Chromium 문제: 1299241

소스 맵 개선사항

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

이제 중단점이 sourceURL 주석과 함께 인라인 <script>에서 작동합니다.
디버거가 이제 소스 맵을 사용하여 Scope 뷰에서 블록 범위 변수를 확인합니다.
디버거가 이제 소스 맵을 사용하여 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, 개발자 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 Preview 채널을 통해 개발자는 최신 DevTools 기능에 액세스하고 최첨단 웹 플랫폼 API를 테스트하며 다른 사용자보다 먼저 사이트에서 문제를 찾을 수 있습니다.

Chrome DevTools팀에 문의하기

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

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