렌더링 탭 개요

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