이 페이지는 Cloud Translation API를 통해 번역되었습니다.

DevTools의 새로운 기능 (Chrome 112)

Sofia Emelianova

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를 사용하면 웹사이트의 성능을 포착하고 개선할 수 있습니다.

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

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

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

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

확장 프로그램 다운로드

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

내보내기 드롭다운 메뉴의 광고 확장 가져오기 옵션

언제든지 Recorder Extensions 목록에 자체 확장 프로그램을 추가할 수 있습니다. 여러분이 목록에 오르시길 바랍니다.

Chromium 문제: 1417104, 1413168

요소 > 스타일 업데이트

CSS 문서

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

CSS 속성에 대한 문서가 포함된 도움말

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

CSS에 대해 잘 알고 있다면 도움말이 불편하게 느껴질 수 있습니다. 모두 사용 중지하려면 표시 안함을 선택합니다.

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

Chromium 문제: 1401107

CSS 중첩 지원

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

Chromium 문제: 1172985

콘솔에서 로그 지점 및 조건부 중단점 표시

향상된 중단점 UX를 더욱 개선하여 이제 콘솔은 중단점에 의해 트리거된 메시지를 표시합니다.

주황색 물음표 ?가 있는 조건부 중단점에서 console.* 호출
분홍색 두 개의 점 ..이 있는 로그 지점 메시지

이제 콘솔에서 중단점에 의해 트리거된 메시지를 아이콘과 적절한 소스 링크와 함께 표시하는 방식이 변경되었습니다.

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

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

중단점 편집기를 여는 로그 지점 메시지 옆의 앵커 링크

Chromium 문제: 1027458

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

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

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

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

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

무시 목록에 추가된 스크립트 및 폴더는 회색으로 표시됩니다. 옵션 더보기 드롭다운 메뉴의 시험용 옵션을 사용하면 해당 스크립트 및 폴더를 숨길 수 있습니다.

무시된 스크립트를 선택하면 Configure 버튼을 누르면 Settings > Ignore List로 이동합니다. > 무시된 소스 숨기기 를 사용하여 파일 트리에서 무시된 소스를 숨길 수도 있습니다.

Chromium 문제: 883325

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

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

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

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

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

Chromium 문제: 1417647

대비 감소 에뮬레이션

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

'시각 장애 에뮬레이션' 기능에서 선택된 대비 감소 옵션

옵션에서 나타내는 색상 민감도를 알 수 있도록 목록 옵션이 업데이트되었습니다.

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

Chromium 문제: 1412719, 1412721

등대 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

노옵스(no-ops) 서비스 워커 가져오기 핸들러를 삭제하라는 콘솔 경고

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

이제 웹사이트에서 노옵스(no-op) 가져오기 핸들러를 발견하면 Console에 경고가 표시됩니다. 삭제하는 것이 좋습니다.

콘솔의 노옵스(no-ops) 가져오기 핸들러 및 해당 경고

Chromium 문제: 1347319

기타 주요 정보

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

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

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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