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

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

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

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

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

확장 프로그램 다운로드

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

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

언제든지 Recorder 확장 프로그램 목록에 자체 확장 프로그램을 추가할 수 있습니다. 여러분의 참여를 기대합니다.

Chromium 문제: 1417104, 1413168

요소 > 스타일 업데이트

CSS 문서

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

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

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

CSS에 대해 잘 아는 경우 도움말이 성가실 수 있습니다. 모두 사용 중지하려면 표시 안함을 선택합니다.

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

Chromium 문제: 1401107

CSS 중첩 지원

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

Chromium 문제: 1172985

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

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

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

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

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

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

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

Chromium 문제: 1027458

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

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

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

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

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

무시 목록에 포함된 스크립트와 폴더는 비활성화되어 있으며, 옵션 더보기 드롭다운 메뉴에서 실험적인 옵션을 사용하여 숨길 수 있습니다.

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

Chromium 문제: 883325

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

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

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

프로파일러 대신 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-op)(작업 없음) 서비스 워커 가져오기 핸들러를 건너뜁니다. 탐색 속도를 저하시킬 수 있지만 별다른 용도는 없기 때문입니다. 이러한 핸들러는 웹사이트에서 프로그레시브 웹 앱 자격을 확인하는 데 더 이상 필요하지 않습니다.

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

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

Chromium 문제: 1347319.

기타 주요 사항

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

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

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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