DevTools의 새로운 기능 (Chrome 104)

Jecelyn Yeen

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

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

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

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

Chromium 문제: 1303521

Recorder 패널의 느린 재생 옵션

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

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

Recorder 패널의 느린 재생 옵션

Chromium 문제: 1306756

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

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

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

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

Chromium 문제: 1325751

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

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

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

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

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

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

Chromium 문제: 960909

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

실적 통계 패널의 새로운 사용자 시간 트랙을 사용하여 녹화 파일에서 performance.measure() 표시를 시각화합니다.

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

페이지 로드 측정을 시작하면 사용자 시간 트랙이 녹화 파일에 표시됩니다. 타이밍 항목을 클릭하면 측정항목 세부정보가 측정항목 창에 표시됩니다.

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

Chromium 문제: 1322808

요소의 할당된 슬롯 표시

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

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

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

요소의 할당된 슬롯 표시

Chromium 문제: 1018906

성능 녹화의 하드웨어 동시 실행 시뮬레이션

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

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

성능 녹화의 하드웨어 동시 실행 시뮬레이션

Chromium 문제: 1297439

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

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

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

Chromium 문제: 1285091

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

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

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

Chromium 문제: 1288158

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

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

  1. 자체 enumerable 속성
  2. 자체 비 enumerbale 속성
  3. 상속된 enumerable 속성
  4. 상속된 enumarable이 아닌 속성

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

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

Chromium 문제: 1299241

소스 맵 개선

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

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

Chromium 문제: 1329113, 1322115

기타 하이라이트

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

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

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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