DevTools의 새로운 기능 (Chrome 114)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

WebAssembly 디버깅 지원

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

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

  • DWARF 디버깅 정보를 사용하여 매핑된 원본 소스 코드
  • 호출 스택에서 이해하기 쉬운 함수 이름
  • 중단점 지원 등

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

Wasm 디버깅을 테스트하려면 C/C++ DevTools Support (DWARF) 확장 프로그램을 설치하고 Mandelbrot 데모에서 코드를 단계별로 실행하세요.

Chromium 문제: 1414289

Wasm 앱에서 단계별 실행 동작 개선

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

하지만 함수에서 반환된 후와 같이 시작된 함수 외부로 이동하면 단계별 실행이 종료됩니다.

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

환경설정, 소스에 있는 새로운 설정입니다.

Chromium 문제: 1418938

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

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

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

요소 패널에서 강조 표시되고 문제 패널에서 보고된 자동 완성 문제

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

Chromium 문제: 1399414

Recorder의 어설션

이제 레코더 패널을 사용하면 모든 런타임 데이터를 사용하여 녹음 중에 바로 어설션을 추가할 수 있습니다.

어설션을 추가하려면 새 녹음을 시작하고 페이지와 상호작용하고 어설션 추가를 클릭합니다. 레코더는 waitForElement 유형의 단계를 삽입하며, 이 단계는 즉시 맞춤설정할 수 있습니다. 동영상을 시청하여 커피 카트 데모에서 어설션이 작동하는 방식을 확인하세요.

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

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

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

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

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() 명령어가 성능 > 기본을 채움

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

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

Chromium 문제: 1429191

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

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

INP 경고입니다.

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

Chromium 문제: 1432512, 1432509

웹 바이탈 트랙이 이동했습니다.

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

웹 바이탈과 긴 작업 모두 다른 곳에 중복된 정보를 추적합니다. 또한 클릭 시 더 자세한 정보를 제공하는 기능이 더 많은 대안에 비해 상호작용성이 떨어졌습니다.

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

또한 경험 트랙의 이름이 용도를 더 정확하게 반영하도록 레이아웃 변경으로 변경되었습니다.

Web Vitals에 대해 자세히 알아보세요.

JavaScript 프로파일러 지원 중단: 3단계

Chrome 58부터 개발자 도구팀은 최종적으로 JavaScript 프로파일러를 지원 중단하고 Node.js 및 Deno 개발자가 성능 패널을 사용하여 JavaScript CPU 성능을 프로파일링하도록 계획했습니다.

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

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

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

Chromium 문제: 1428026

기타 하이라이트

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

  • 이제 색상 선택기가 클리핑될 때 색역 외 HWB 값을 감지합니다 (1429271).
  • 소스 패널:
    • 소스 맵의 JSON 구문 강조 표시가 사용 설정되었습니다 (1385374).
    • 수동으로 소스 맵을 사용 중지하면 '소스 맵이 감지됨' 메시지가 표시되지 않습니다 (1423718).
  • 이제 콘솔에서 Ctrl + Enter를 사용하여 불완전한 JavaScript 표현식을 평가하고 구문 오류를 출력할 수 있습니다 (1314700).
  • 이제 중단점 수정 대화상자에 닫기 버튼이 있습니다. 이전에는 Enter를 누르거나 대화상자의 포커스를 해제해야 했습니다 (1412980).

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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