DevTools의 새로운 기능 (Chrome 112)

Sofia Emelianova
Sofia Emelianova

녹음기 업데이트

재생 확장 프로그램 지원

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의 확장 프로그램을 가져옵니다. 녹음 파일에서 확장 프로그램을 다운로드합니다.

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

언제든지 Recorder Extensions 목록에 자체 확장 프로그램을 추가할 수 있습니다. 여러분의 참여가 기쁜 마음으로 전해드리겠습니다.

Chromium 문제: 1417104, 1413168

요소 > 스타일 업데이트

CSS 문서

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

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

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

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

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

Chromium 문제: 1401107

CSS 중첩 지원

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

Chromium 문제: 1172985

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

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

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

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

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

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

Chromium 문제: 1027458

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

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

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

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

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

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

무시된 스크립트를 선택하면 구성 버튼을 누르면 설정을 탭합니다. 설정 > 무시 목록: 점 3개로 된 메뉴 >를 사용하여 파일 트리에서 무시된 소스를 숨길 수도 있습니다. 무시 나열된 소스를 숨깁니다 시험용입니다..

Chromium 문제: 883325

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

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

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

Profiler 상단의 지원 중단 배너

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

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

Chromium 문제: 1417647

대비 감소 에뮬레이션

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

&#39;시각 장애 에뮬레이션&#39;에서 선택된 대비 감소 옵션 기능을 제공합니다

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

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

Chromium 문제: 1412719, 1412721

등대 10

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

DevTools에서 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

기타 주요 정보

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

  • 출처 > 이제 Breakpoints 창의 모호한 파일 이름 옆에 구별되는 파일 경로가 표시됩니다 (1403924).
  • 이제 Performance 패널의 플레임 차트에 있는 기본 섹션에서 CpuProfiler::StartProfilingProfiler Overhead (1358602)로 지정됩니다.
  • DevTools에서 향상된 자동 완성: <ph type="x-smartling-placeholder">
      </ph>
    • 출처: 모든 단어가 일관되게 완성됨 (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 동영상에 의견을 남겨주세요.

DevTools의 새로운 기능

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