렌더링 탭 개요

Sofia Emelianova
Sofia Emelianova
GitHub

DevTools의 렌더링 탭 기능에 대한 이 개요를 통해 웹 콘텐츠 렌더링에 영향을 미치는 옵션 모음을 살펴보세요.

개요

렌더링 탭에서는 다음 작업을 할 수 있습니다.

  • 렌더링 성능 문제를 알아봅니다. 다시 그리기, 레이아웃 변경, 레이어 및 타일, 스크롤 문제를 발견하고 렌더링 통계와 Core Web Vitals를 확인하세요.
  • CSS 미디어 기능 에뮬레이션 코드나 테스트 환경에서 페이지를 수동으로 지정하지 않고도 페이지가 다양한 CSS 미디어 기능으로 어떻게 렌더링되는지 테스트할 수 있습니다.
  • 다른 유용한 효과를 적용합니다. 광고 프레임을 강조표시하고, 페이지에 포커스를 에뮬레이션하고, 로컬 글꼴 및 이미지 형식을 사용 중지하고, 자동 어두운 테마를 사용 설정하고, 시력 결핍을 에뮬레이션합니다.

렌더링 탭 열기

렌더링 탭을 열려면 다음 단계를 따르세요.

  1. DevTools를 엽니다.

  2. Command Shift P(Mac) 또는 Control Shift P(Windows, Linux, ChromeOS)를 눌러 Command Menu(명령어 메뉴)를 엽니다.

    명령어 메뉴, 렌더링

  3. rendering를 입력하기 시작하고 Show Rendering을 선택한 다음 Enter를 누릅니다. DevTools에서 DevTools 창 하단에 렌더링 탭을 표시합니다.

또는 다음과 같은 방법으로 렌더링 탭을 열 수 있습니다.

  • Esc 키를 눌러 창을 열고 왼쪽 상단에서 도구 더보기 더보기 > 렌더링을 클릭합니다.
  • 오른쪽 상단에서 옵션 더보기 더보기 > 도구 더보기 > 렌더링을 클릭합니다.