DevTools의 새로운 기능 (Chrome 112)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

녹음기 업데이트

재생 확장 프로그램 지원

Recorder에서는 확장 프로그램을 사용하여 DevTools에 삽입할 수 있는 맞춤 재생 옵션을 지원합니다.

예시 확장 프로그램을 사용해 봅니다. 새 맞춤 재생 옵션을 선택하여 맞춤 재생 UI를 엽니다.

맞춤 재생 UI

필요에 맞게 Recorder를 맞춤설정하고 도구와 통합하려면 자체 확장 프로그램을 개발해 보세요. chrome.devtools.recorder API를 살펴보고 확장 프로그램 예시를 더 확인해 보세요.

Chromium 문제: 1400243

피어스 선택기로 녹음

이제 맞춤, CSS, ARIA, 텍스트, XPath 선택기 외에도 피어스 선택기를 사용하여 녹화할 수 있습니다. 이러한 선택기는 CSS 선택기처럼 작동하지만 섀도우 루트를 관통할 수도 있습니다.

Shadow DOM이 있는 페이지에서 새 녹음을 시작하고 녹음할 선택기 유형에서 체크박스입니다. Pierce를 선택합니다. shadow DOM의 요소와의 상호작용을 기록하고 해당 단계를 검사합니다.

피어스 선택기를 사용하도록 레코더 설정. 피어스 선택기 작동 방식

Chromium 문제: 1411188

Lighthouse 분석이 포함된 Puppeteer 스크립트로 내보내기

Recorder에 새로운 내보내기 옵션인 Puppeteer (Lighthouse 분석 포함)가 도입되었습니다. Puppeteer를 사용하면 Chrome을 자동화하고 제어할 수 있습니다. Lighthouse를 사용하면 웹사이트의 성능을 파악하고 개선할 수 있습니다.

녹음 파일을 열고 내보내기를 클릭합니다. 내보내기를 클릭한 다음 새 옵션을 선택하고 .js 파일을 저장합니다.

Puppeteer (Lighthouse 분석 포함) 내보내기

Puppeteer 스크립트를 실행하여 flow.report.html 파일로 Lighthouse 보고서를 가져옵니다.

Chrome에서 Lighthouse 보고서가 열렸습니다.

확장 프로그램 가져오기

맞춤 내보내기 옵션을 사용하여 녹음기 환경을 맞춤설정하는 옵션을 살펴보세요. 녹화에서 내보내기를 클릭합니다. 내보내기 > 확장 프로그램 가져오기를 클릭하여 Recorder의 확장 프로그램을 가져옵니다.

내보내기 드롭다운 메뉴의 확장 프로그램 가져오기 옵션

녹음기 확장 프로그램 목록에 자체 확장 프로그램을 추가할 수 있습니다. 목록에 올리기를 기대합니다.

Chromium 문제: 1417104, 1413168

요소 > 스타일 업데이트

CSS 문서

CSS 속성에 관한 문서를 하루에 몇 번이나 찾아보시나요? 이제 속성 위로 마우스를 가져가면 요소 > 스타일 창에 간단한 설명이 표시됩니다.

CSS 속성에 관한 문서가 포함된 도움말입니다.

도움말에는 이 속성에 관한 MDN CSS 참조로 연결되는 자세히 알아보기 링크도 있습니다.

CSS를 잘 알고 있다면 도움말이 방해가 될 수 있습니다. 모두 사용 중지하려면 체크박스입니다. 표시 안함을 선택합니다.

다시 사용 설정하려면 설정을 탭합니다. 설정 > 환경설정 > 요소 > 체크박스입니다. CSS 문서 도움말 표시를 선택합니다.

Chromium 문제: 1401107

CSS 중첩 지원

이제 요소 > 스타일 창에서 CSS 중첩 문법을 인식하고 중첩된 스타일을 올바른 요소에 적용합니다.

Chromium 문제: 1172985

콘솔에서 로그 포인트 및 조건부 브레이크포인트 표시

향상된 브레이크포인트 UX를 더욱 개선하여 이제 콘솔에서 브레이크포인트로 트리거된 메시지를 표시합니다.

이제 콘솔에서 중단점에서 트리거된 메시지를 아이콘과 올바른 소스 링크를 사용하여 표시하는 방식이 변경되었습니다.

이제 콘솔에서 V8에서 JavaScript를 실행하기 위해 Chrome에서 만드는 VM<number> 스크립트 대신 소스 파일의 중단점에 대한 적절한 앵커 링크를 제공합니다.

중단점 메시지 옆에 있는 링크를 클릭하여 중단점 편집기로 바로 이동합니다.

로그포인트 메시지 옆에 있는 앵커 링크로, 중단점 편집기를 엽니다.

Chromium 문제: 1027458

디버깅 중에 관련 없는 스크립트 무시

코드의 가장 중요한 부분에 집중할 수 있도록 이제 Sources > Page 창의 파일 트리에서 바로 무시 목록에 관련 없는 스크립트를 추가할 수 있습니다.

스크립트 또는 폴더를 마우스 오른쪽 버튼으로 클릭하고 무시 관련 옵션 중 하나를 선택합니다. 목록에 스크립트 또는 폴더를 추가하거나 삭제하는 옵션이 표시될 수 있습니다. 디버거는 목록에 추가된 스크립트를 무시하고 호출 스택에서 생략합니다.

무시 관련 옵션이 있는 폴더 및 스크립트의 컨텍스트 메뉴

무시 목록에 있는 모든 스크립트와 폴더는 파일 트리에서 비활성화됩니다.

무시 목록에 있는 스크립트와 폴더는 비활성화되어 있으며 &#39;옵션 더보기&#39; 드롭다운 메뉴의 실험용 옵션을 사용하여 숨길 수 있습니다.

무시된 스크립트를 선택하면 구성 버튼을 클릭하면 설정을 탭합니다. 설정 > 무시 목록으로 이동합니다. 점 3개로 된 메뉴 > 무시 목록에 포함된 소스 숨기기 시험용입니다.를 사용하여 파일 트리에서 무시된 소스를 숨길 수도 있습니다.

Chromium 문제: 883325

JavaScript 프로파일러 지원 중단 시작

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

이 DevTools 버전 (112)에서는 4단계 JavaScript 프로파일러 지원 중단이 시작됩니다. 이제 JavaScript 프로파일러 패널에 해당하는 경고 배너가 표시됩니다.

프로파일러 상단의 지원 중단 배너

프로파일러 대신 성능 패널을 사용하여 CPU를 프로파일링합니다.

자세한 내용은 해당 RFC 및 crbug.com/1354548에서 확인하세요.

Chromium 문제: 1417647

대비 감소 에뮬레이션

렌더링 탭의 색맹 에뮬레이션 목록에 대비 감소라는 새로운 옵션이 추가되었습니다. 이 옵션을 사용하면 대비 감도가 감소한 사용자에게 웹사이트가 어떻게 표시되는지 확인할 수 있습니다.

&#39;시각 장애 에뮬레이션&#39; 기능에서 선택한 대비 감소 옵션

옵션이 어떤 색상 무감각을 나타내는지 알 수 있도록 목록 옵션이 업데이트되었습니다.

DevTools를 사용하면 모든 대비 문제를 한 번에 찾아 수정할 수 있습니다. 자세한 내용은 웹사이트 가독성 개선하기를 참고하세요.

Chromium 문제: 1412719, 1412721

Lighthouse 10

이제 Lighthouse 패널에서 Lighthouse 10.0.1을 실행합니다. 자세한 내용은 Lighthouse 10.0.1의 새로운 기능을 참고하세요.

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

Lighthouse > 설정을 탭합니다. > 체크박스가 비어 있습니다. 이제 기존 탐색이 기본적으로 사용 중지됩니다. 이 옵션은 탐색 모드에서 기존 Lighthouse 구성을 사용합니다.

기존 탐색이 사용 중지되었습니다.

이제 Lighthouse 10은 Moto G Power를 기본 에뮬레이션 기기로 사용합니다. DevTools에서 설정을 탭합니다. 설정 > 기기에 이 기기를 추가했습니다.

기기 목록의 Moto G Power

Chromium 문제: 772558

무작위 서비스 워커 가져오기 핸들러를 삭제하라는 Console 경고

Chrome 112에서는 탐색 속도를 느리게 만들 수 있지만 목적을 달성하지 못하는 무작위 (no operation) 서비스 워커 가져오기 핸들러를 건너뜁니다. 웹사이트가 프로그레시브 웹 앱으로 간주되기 위해 이러한 핸들러가 더 이상 필요하지 않습니다.

이제 웹사이트에서 무작위 가져오기 핸들러가 발견되면 콘솔에 경고가 표시됩니다. 삭제해도 될지 고려해 보세요.

무작위 가져오기 핸들러와 Console의 해당 경고

Chromium 문제: 1347319

기타 하이라이트

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

  • 이제 소스 > 중단점 창에 모호한 파일 이름 옆에 구분되는 파일 경로가 표시됩니다 (1403924).
  • 이제 성능 패널의 플레임 차트에서 기본 섹션이 CpuProfiler::StartProfiling를 Profiler Overhead로 지정합니다 (1358602).
  • DevTools의 자동 완성 기능이 개선되었습니다.
    • 출처: 단어의 일관된 자동 완성 (1320204)
    • Console: Arrow down가 첫 번째 추천을 선택하고 추천에 Tab 힌트가 표시됩니다 (1276960).
  • DevTools에 문서 PIP 모드 창을 열 때 일시중지할 수 있는 이벤트 리스너 중단점이 추가되었습니다. (1315352)
  • DevTools에서 Vue2 webpack 아티팩트를 JavaScript로 올바르게 표시하는 해결 방법을 설정했습니다 (1416562).
  • 콘솔 설정의 이름이 더 명확해집니다. console.trace() 메시지 자동 확장. (1139616).

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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