DevTools의 새로운 기능 (Chrome 114)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

WebAssembly 디버깅 지원

DevTools는 기본적으로 설정을 탭합니다. 설정 > 실험 > 체크박스입니다. WebAssembly 디버깅: DWARF 지원 사용 설정을 사용 설정합니다. 자세한 내용은 최신 도구로 WebAssembly 디버깅을 참고하세요.

이 실험을 사용하면 Wasm 앱에서 실행을 일시중지하고 C 및 C++ 코드를 디버그할 수 있으며, 모든 디버깅 정보를 사용할 수 있습니다.

  • DWARF 디버그 정보를 사용하여 매핑된 원본 소스 코드입니다.
  • 호출 스택에 이해하기 쉬운 함수 이름이 표시됩니다.
  • 중단점 지원 등

디버거에서 일시중지된 Wasm 애플리케이션

Wasm 디버깅을 테스트하려면 C/C++ DevTools 지원 (DWARF) 확장 프로그램을 설치하고 Mandelbrot 데모에서 코드를 단계별로 살펴봅니다.

Chromium 문제: 1414289

Wasm 앱의 스테핑 동작이 개선됨

Step Over 이제 원본 코드에서 Step over를 사용하면 디스어셈블리 (.wasm 파일)에서 일시중지가 방지됩니다. 이전에는 여기서 일시중지되었습니다.

그러나 스테핑은 시작된 함수 외부로 이동하면 종료됩니다(예: 함수에서 반환된 후).

이 동작은 설정을 탭합니다. 설정 > 환경설정 > 소스에서 기본적으로 사용 설정되어 있습니다.

환경설정 및 소스에서 찾을 수 있는 새 설정

Chromium 문제: 1418938

요소 패널 및 문제 탭을 사용하여 자동 완성 디버그

Chrome 자동 완성은 주소나 결제 정보와 같은 저장된 정보로 양식을 자동으로 작성합니다. 자동 완성 관련 문제를 쉽게 디버그할 수 있도록 이제 요소 패널에서 빨간색 굴절된 밑줄로 강조 표시할 수 있습니다.

이 기능을 확인하려면 설정을 탭합니다. 설정 > 실험 > 체크박스입니다. 요소 패널 DOM 트리에서 위반 노드 또는 속성 강조 표시를 사용 설정하고 이 데모 페이지를 검사합니다.

자동 완성 문제는 Elements 패널에 강조 표시되고 Issues 패널에서 보고됩니다.

DOM 트리에서 강조 표시된 문제 위로 마우스를 가져가 문제 보기를 클릭하면 감지된 모든 문제가 나열되고 오류의 원인에 관한 단서가 제공되는 문제 탭이 열립니다.

Chromium 문제: 1399414

Recorder의 어설션

이제 Recorder 패널을 사용하면 녹화 중에 바로 어설션을 추가할 수 있으며 모든 런타임 데이터를 사용할 수 있습니다.

어설션을 추가하려면 새 녹음을 시작하고 페이지와 상호작용한 후 어설션 추가를 클릭합니다. Recorder는 실시간으로 맞춤설정할 수 있는 waitForElement 유형의 단계를 삽입합니다. 동영상을 시청하여 커피 장바구니 데모에서 어설션이 작동하는 모습을 확인하세요.

이 동영상에서는 다음을 어설션하는 방법을 보여줍니다.

  • HTML 속성(예: 요소의 class)
  • JSON의 JavaScript 속성(예: .innerText)

JavaScript의 조건문, 노드의 하위 요소 수 (count), 요소 표시 여부 등을 어설션하는 단계를 구성할 수도 있습니다. 자세한 내용은 단계 구성을 참고하세요.

또한 이제 Recorder가 나란히 표시되는 코드 보기 및 단계 오른쪽 클릭 메뉴에서 선호하는 스크립트 형식을 기억합니다.

Chromium 문제: 1423624

Lighthouse 10.1.1

이제 Lighthouse 패널에서 Lighthouse 10.1.1을 실행하며, 10.1.0에서 눈에 띄는 변경사항이 도입되었습니다. 이제 URL을 다루는 모든 감사가 항목별로 그룹화되고 크기나 기간과 같은 수치 통계가 집계됩니다. 인기 있는 서드 파티는 카테고리 태그도 지정되어 있으므로 페이지에서 목적을 더 쉽게 파악할 수 있습니다.

항목별로 그룹화된 감사

DevTools에서 Lighthouse 패널을 사용하는 기본사항을 알아보려면 Lighthouse: 웹사이트 속도 최적화를 참고하세요.

Chromium 문제: 772558

성능 향상

performance.mark() 성능 > 타이밍에서 마우스 오버 시 타이밍을 표시합니다.

이제 실적 > 타이밍에서 해당 마크 위로 마우스를 가져가면 performance.mark() 메서드에 타이밍이 표시됩니다. 여기서 타이밍은 이전 탐색 이벤트와 관련된 타임스탬프입니다.

타이밍 섹션에서 마우스 오버 시 타이밍이 표시되는 팝업

Chromium 문제: 1426762

profile() 명령어로 성능 > 기본이 채워짐

이제 Console의 profile() 및 profileEnd() 명령어가 성능 패널의 기본 스레드에서 CPU 프로파일링을 시작하고 중지합니다.

console() 명령어는 성능 패널에 프로필을 만듭니다.

Chromium 문제: 1429191

느린 사용자 상호작용에 대한 경고

사용자 상호작용이 200밀리초를 초과하면 성능 > 요약 탭에 다음 페인트에 대한 상호작용 (INP) 경고가 표시됩니다.

INP 경고

또한 상호작용의 ID가 도움말에서 요약으로 이동했습니다.

Chromium 문제: 1432512, 1432509

웹 바이탈 추적이 이동함

실적 패널에서 다음 트랙이 삭제되었습니다.

웹 Vitals 및 긴 작업 트랙 모두 다른 위치에 중복된 정보가 포함되어 있었습니다. 또한 클릭 시 더 자세한 정보를 제공하는 더 완벽한 대안과 비교해 상호작용이 불가능했습니다.

웹 바이탈을 타이밍 트랙으로 이동하기 전과 후

또한 환경 트랙의 이름이 레이아웃 변경으로 변경되어 사용 빈도를 더 정확하게 반영합니다.

웹 바이탈에 대해 자세히 알아보세요.

JavaScript 프로파일러 지원 중단: 세 번째 단계

DevTools팀은 빠르면 Chrome 58부터 JavaScript 프로파일러를 지원 중단하고 Node.js 및 Deno 개발자가 JavaScript CPU 성능을 프로파일링할 때 성능 패널을 사용하도록 계획했습니다.

DevTools 버전 114에서는 4단계 JavaScript 프로파일러 지원 중단의 3단계가 시작됩니다. 이 단계에서는 JavaScript 프로파일러 패널이 DevTools에서 삭제되지만 설정을 탭합니다. 설정 > 실험을 통해 일시적으로 사용 설정하고 점 3개로 된 메뉴 점 3개 메뉴에서 열 수 있습니다.

설정 및 실험의 JavaScript 프로파일러 체크박스

CPU 성능을 프로파일링하려면 성능 패널을 사용하세요.

Chromium 문제: 1428026

기타 하이라이트

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

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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