DevTools의 새로운 기능 (Chrome 114)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

WebAssembly 디버깅 지원

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

이 실험을 통해 사용 가능한 모든 디버깅 정보를 사용하여 Wasm 앱에서 실행을 일시중지하고 C 및 C++ 코드를 디버그할 수 있습니다.

  • DWARF 디버깅 정보를 사용하여 매핑된 원본 소스 코드입니다.
  • 호출 스택에서 이해할 수 있는 함수 이름
  • 중단점 지원 등

Debugger에서 Wasm 애플리케이션이 일시중지되었습니다.

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

Chromium 문제: 1414289

Wasm 앱의 걷기 동작 개선

Step Over. 이제 원본 코드에서 Step Over를 사용하면 분해 (.wasm 파일)가 일시중지되지 않습니다. 이전에는 이 위치에서 일시중지했습니다.

그러나 스테핑은 시작된 함수 외부에 있을 때(예: 함수에서 반환된 후) 종료됩니다.

이 동작은 설정을 탭합니다. 설정 >에서 기본적으로 사용 설정됩니다. 환경설정 > 출처.

환경설정과 소스에 새로 추가된 설정입니다.

Chromium 문제: 1418938

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

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

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

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

DOM 트리에서 강조 표시된 문제 위로 마우스를 가져간 다음 문제 보기를 클릭하면 문제 탭이 열립니다. 이 탭에서는 감지된 모든 문제를 나열하고 문제점에 대한 단서를 제공합니다.

Chromium 문제: 1399414

녹음기의 어설션

이제 Recorder 패널에서 사용할 수 있는 모든 런타임 데이터와 함께 녹화 중에 어설션을 바로 추가할 수 있습니다.

어설션을 추가하려면 새 기록을 시작하고 페이지와 상호작용한 다음 Add assertion을 클릭합니다. 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 > > 해당 표시 위로 마우스를 가져가면 performance.mark() 메서드에서 타이밍을 표시합니다. 타이밍. 여기서 타이밍은 이전 탐색 이벤트에 상대적인 타임스탬프입니다.

타이밍 섹션에 마우스를 가져가면 표시되는 팝업입니다.

Chromium 문제: 1426762

profile() 명령어는 Performance > 대표 전화

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

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

Chromium 문제: 1429191

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

사용자 상호작용이 200밀리초를 초과하면 Performance > 요약 탭

INP 경고

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

Chromium 문제: 1432512, 1432509

Web Vitals 트랙 이전

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

  • 웹 바이탈 트랙 마우스를 가져가면 시간 트랙에서 관련 시간을 확인할 수 있습니다.
  • Long Tasks 하위 트랙 이러한 작업은 이미 빨간색과 빨간색 삼각형으로 음영 처리된 기본 트랙에서 찾을 수 있습니다.

웹 바이탈 및 장기 작업 트랙에는 다른 곳에서 중복된 정보가 포함되어 있습니다. 또한 클릭했을 때 더 자세한 정보를 제공하는 보다 완벽한 기능의 대안에 비해 양방향이 아닙니다.

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

또한 사용법을 더 정확하게 반영하기 위해 Experiences 트랙의 이름이 Layout Shifts로 변경되었습니다.

웹 바이탈 자세히 알아보기

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

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

DevTools 버전 114에서는 4단계 JavaScript 프로파일러 지원 중단의 3단계를 시작합니다. 이 단계에서는 JavaScript 프로파일러 패널이 DevTools에서 삭제되지만 설정을 탭합니다. Settings > 실험을 클릭하고 점 3개로 된 메뉴 점 3개로 된 메뉴에서 실험을 엽니다.

JavaScript 프로파일러 체크박스를 선택합니다.

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

Chromium 문제: 1428026

기타 주요 정보

다음은 이번 버전에서 주목할 만한 수정사항입니다.

  • 이제 색상 선택 도구는 잘릴 때 색 영역을 벗어남의 HWB 값을 감지합니다 (1429271).
  • Sources 패널: <ph type="x-smartling-placeholder">
      </ph>
    • 소스 맵의 JSON 구문 강조표시가 사용 설정되었습니다 (1385374).
    • '소스 맵 감지됨' 표시가 중지됨 수동으로 소스 맵을 사용 중지하면 메시지가 표시됩니다 (1423718).
  • 이제 콘솔에서 Ctrl + Ctrl 키를 사용하여 불완전한 JavaScript 표현식을 평가하고 구문 오류 (1314700)를 출력합니다.
  • 이제 중단점 수정 대화상자에 닫기 버튼이 있습니다. 이전에는 Enter를 누르거나 대화상자의 포커스를 해제해야 했습니다 (1412980).

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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

DevTools의 새로운 기능

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