DevTools의 새로운 기능 (Chrome 104)

Jecelyn Yeen

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

프레임 다시 시작 기능이 다시 제공됩니다. 함수에서 일시중지된 경우 위의 코드를 다시 실행할 수 있습니다. 이전에는 안정성 문제로 인해 Chrome 92에서 이 기능이 지원 중단되고 삭제되었습니다.

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

Chromium 문제: 1303521

Recorder 패널의 느린 재생 옵션

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

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

Chromium 문제: 1306756

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

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

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

Chromium 문제: 1325751

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

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

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

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

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

Chromium 문제: 960909

성능 통계 패널의 새로운 사용자 타이밍 트랙

성능 통계 패널의 새로운 사용자 타이밍 트랙을 사용하여 녹화에서 performance.measure() 표시를 시각화합니다.

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

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

Chromium 문제: 1322808

요소의 할당된 슬롯 표시

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

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

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

Chromium 문제: 1018906

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

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

일부 애플리케이션은 navigator.hardwareConcurrency를 사용하여 애플리케이션의 병렬 처리 정도를 제어합니다(예: Emscripten pthread 풀 크기 제어). 이 기능을 사용하면 개발자가 다양한 코어 수로 애플리케이션 성능을 테스트할 수 있습니다.

Chromium 문제: 1297439

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

이제 CSS 변수를 자동 완성할 때 DevTools에서 의미 있는 값으로 비색상 변수를 채워 값이 노드에 어떤 영향을 미치는지 미리 볼 수 있습니다.

Chromium 문제: 1285091

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

애플리케이션 패널의 뒤로/앞으로 캐시 창에 페이지가 bfcache를 사용할 수 없도록 차단하는 프레임을 식별하는 데 도움이 되는 새로운 프레임 섹션이 있습니다.

Chromium 문제: 1288158

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

이제 JavaScript 객체 속성의 자동 완성은 다음 순서에 따라 표시됩니다.

1. 자체 열거형 속성
2. 열거할 수 없는 속성
3. 상속된 열거형 속성
4. 상속된 열거 불가능한 속성

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

Chromium 문제: 1299241

소스 맵 개선

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

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

Chromium 문제: 1329113, 1322115

기타 하이라이트

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

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

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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

DevTools의 새로운 기능

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