기타 효과 적용: 자동 어두운 테마 사용 설정, 포커스 에뮬레이션 등

Sofia Emelianova
Sofia Emelianova
GitHub

렌더링 탭 옵션에서 페이지에 적용할 유용한 효과를 찾아보세요.

광고 프레임 강조표시

프레임이 광고로 태그되었는지 확인하려면 다음 단계를 따르세요.

  1. 이 데모에서 렌더링 탭을 열고 광고 프레임 강조 표시를 선택합니다.
  2. 빨간색으로 강조표시된 광고 프레임을 확인하세요.

빨간색으로 강조 표시된 광고

포커스된 페이지 에뮬레이션

페이지에서 DevTools로 포커스를 전환하면 일부 오버레이 요소가 포커스에 의해 트리거되면 자동으로 숨겨집니다. 예: 드롭다운 목록, 메뉴 또는 날짜 선택 도구 포커스된 페이지 에뮬레이션 옵션을 사용하면 포커스가 있는 것처럼 이러한 요소를 디버그할 수 있습니다.

포커스가 설정된 페이지를 에뮬레이션하려면 다음 안내를 따르세요.

  1. 디버깅할 요소가 있는 페이지(예: 검색창이 있는 YouTube 웹사이트)를 엽니다.

  2. 페이지에서 렌더링 탭을 열고 포커스가 설정된 페이지 에뮬레이션을 선택하고 선택 해제합니다.

    포커스된 페이지 에뮬레이션

요소의 작업 모음에 있는 :hov 버튼에서도 동일한 옵션을 찾을 수 있습니다. 스타일.

로컬 글꼴 사용 중지

@font-face 규칙에서 local() 소스를 사용 중지하여 로컬 글꼴 대체 글꼴이 예상대로 작동하는지 확인합니다.

개발자와 디자이너는 개발 중에 동일한 글꼴의 두 가지 사본을 사용하는 경우가 많습니다.

  • 디자인 도구의 로컬 글꼴
  • 코드용 웹 글꼴

로컬 글꼴을 사용 중지하면 다음 작업을 더 쉽게 할 수 있습니다.

  • 웹 글꼴 로드 성능 및 최적화 디버그 및 측정
  • CSS @font-face 규칙이 올바른지 확인
  • 웹 글꼴과 로컬 버전의 차이점 확인
Chrome은 기기에서 이 글꼴을 발견하면 Courier New에서 이 문장을 렌더링합니다.

@font-face 규칙에서 누락된 local() 소스를 에뮬레이션합니다.

  1. 위 문장을 검사하고 요소를 열고 > 계산됨을 클릭하고 맨 아래로 스크롤한 다음 렌더링된 글꼴 아래에서 Chrome이 로컬 파일에서 Courier New를 발견했음을 확인합니다.

    렌더링된 글꼴: 로컬

  2. 렌더링 탭을 열고 로컬 글꼴 사용 중지를 선택한 다음 가 페이지를 새로고침합니다.

  3. 웹에서 Roboto로 작성된 문장을 살펴봅니다.

    렌더링된 글꼴: 네트워크 리소스

자동 어두운 모드 사용 설정

어두운 모드를 구현하지 않은 경우에도 어두운 모드에서 사이트가 어떻게 표시되는지 확인할 수 있습니다.

Chrome 96에서는 Android의 자동 어두운 테마에 관한 오리진 트라이얼을 도입했습니다. 이 기능을 사용하면 사용자가 운영체제에서 어두운 테마를 선택한 경우 브라우저가 밝은 테마 사이트에 자동 생성된 어두운 테마를 적용합니다.

자동 어두운 모드를 사용 설정하려면 다음 단계를 따르세요.

  1. 이 페이지에서 렌더링 탭을 열고 자동 어두운 모드 사용 설정을 선택합니다.
  2. 이 페이지를 어두운 모드로 확인합니다.

자동 어두운 모드가 사용 설정됨

색맹 에뮬레이션

누구나 웹을 이용하고 즐길 수 있어야 합니다. Google은 이를 실현하기 위해 최선을 다하고 있습니다.

Chrome DevTools를 사용하면 시각 장애가 있는 사용자가 사이트를 어떻게 보는지 확인할 수 있으므로 이러한 사용자를 위해 사이트를 개선할 수 있습니다. 자세한 내용은 색각 이상 시뮬레이션하기를 참고하세요.

시각 장애를 에뮬레이션하려면 다음 단계를 따르세요.

  1. 렌더링 탭을 엽니다.

  2. 시각 장애 에뮬레이션에서 드롭다운 목록에서 다음 중 하나를 선택합니다.

    • 에뮬레이션 없음
    • 흐릿한 시야.
    • 대비 감소.
    • 제1색맹(적색맹) 빨간색에 대한 낮은 인식 초록색, 빨간색, 노란색이 혼동되었죠.
    • 제2색맹(녹색맹) 녹색에 대한 인식도가 낮고 녹색, 빨간색, 노란색을 혼동합니다.
    • 제3색맹(청색맹) 파란색에 대한 인식이 낮음 녹색과 파란색의 혼란입니다.
    • 색맹(전색맹) 부분적으로 또는 전체적으로 색각이 전혀 나타나지 않는 증상입니다.

청색맹 (청색맹)을 선택했습니다.

AVIF 및 WebP 이미지 형식 사용 중지

이러한 에뮬레이션을 사용하면 개발자가 브라우저를 전환하지 않고도 다양한 이미지 로드 시나리오를 더 쉽게 테스트할 수 있습니다.

이전 브라우저를 위한 대체 PNG 이미지와 함께 최신 브라우저에 AVIF 및 WebP 형식으로 이미지를 게재하는 다음 HTML 코드가 있다고 가정해 보겠습니다.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

페이지에서 모든 AVIF 이미지(또는 이와 유사한 WebP 이미지)를 사용 중지하려면 다음 단계를 따르세요.

  1. 렌더링 탭을 열고 AVIF 이미지 형식 사용 중지를 선택합니다.
  2. 페이지를 새로고침하고 img src입니다. 현재 이미지 src(currentSrc)가 이제 대체 WebP 이미지입니다.

이미지 유형 에뮬레이션

마찬가지로 WebP 이미지를 사용 중지할 수 있습니다.