DevTools의 새로운 기능 (Chrome 112)

녹음기 업데이트

재생 확장 프로그램 지원

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

예시 확장 프로그램을 사용해 봅니다. 새 맞춤 재생 옵션을 선택하여 맞춤 재생 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 스크립트를 실행하여 flow.report.html 파일로 Lighthouse 보고서를 가져옵니다.

확장 프로그램 가져오기

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

언제든지 Recorder Extensions 목록에 자체 확장 프로그램을 추가할 수 있습니다. 목록에 올리기를 기대합니다.

Chromium 문제: 1417104, 1413168

요소 > 스타일 업데이트

CSS 문서

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

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

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

다시 사용 설정하려면 설정 > 환경설정 > 요소 > CSS 문서 도움말 표시를 선택하세요.

Chromium 문제: 1401107

CSS 중첩 지원

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

Chromium 문제: 1172985

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

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

• console.*는 주황색 물음표 ?와 함께 조건부 중단점을 호출합니다.
• 분홍색 점 2개 ..가 있는 로그 지점 메시지

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

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

Chromium 문제: 1027458

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

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

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

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

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

Chromium 문제: 883325

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

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

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

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

해당하는 RFC 및 crbug.com/1354548에서 자세히 알아보고 의견을 보내주세요.

Chromium 문제: 1417647

대비 감소 에뮬레이션

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

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

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에서 설정 > 기기에 이 기기를 추가했습니다.

Chromium 문제: 772558

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

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

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

Chromium 문제: 1347319

기타 하이라이트

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

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

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

• crbug.com에서 의견 및 기능 요청을 제출하세요.
• DevTools에서 more_vert 옵션 더보기 > 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 신고하세요.
• @ChromeDevTools에서 트윗하세요.
• DevTools의 새로운 기능 관련 YouTube 동영상 또는 DevTools 도움말 YouTube 동영상에 의견을 남겨주세요.

DevTools의 새로운 기능

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