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

Sofia Emelianova
Sofia Emelianova
GitHub

렌더링 탭 옵션에서 페이지에 적용할 수 있는 유용한 효과를 살펴보세요.

광고 프레임 강조표시

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

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

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

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

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

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

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

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

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

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

로컬 글꼴 사용 중지

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

종종 개발자와 디자이너는 개발 중에 동일한 글꼴의 두 가지 서로 다른 사본을 사용합니다.

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

로컬 글꼴을 사용 중지하면 다음 작업이 더 쉬워집니다.

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

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

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

    렌더링된 글꼴: 로컬

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

  3. 웹에서 찾은 Roboto의 문장을 관찰합니다.

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

자동 어두운 모드 사용 설정

어두운 모드를 구현하지 않았더라도 사이트가 어떻게 표시되는지 확인할 수 있습니다.

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

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

  1. 이 페이지에서 렌더링 탭을 열고 자동 어두운 모드 사용을 선택합니다.
  2. 어두운 모드에서 이 페이지를 살펴보세요.

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

색맹 에뮬레이션

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

Chrome DevTools를 사용하면 시각 장애가 있는 사용자가 사이트를 어떻게 보는지 확인하여 사용자에게 더 나은 서비스를 제공할 수 있습니다. 자세한 내용은 색각 이상 시뮬레이션하기를 참고하세요.

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

  1. 렌더링 탭을 엽니다.

  2. Emulation deficiencies의 드롭다운 목록에서 다음 중 하나를 선택합니다.

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

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

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 이미지를 사용 중지할 수 있습니다.