Description from extension meta
모든 페이지의 모바일 뷰포트 미리보기를 한 번의 클릭으로 볼 수 있습니다.
Image from store
Description from store
현대 웹 사용자들은 가만히 앉아 있지 않습니다. 직장에서는 27인치 모니터를, 기차에서는 주머니에 쏙 들어가는 작은 화면을 번갈아 사용하며, 모든 사이트가 두 가지 모두에 맞춰져 있기를 기대합니다. 디자이너, 개발자, 마케터, 심지어 일반 파워 유저에게도 이러한 질문은 매일 제기됩니다. "이 페이지가 실제 휴대폰에서 어떻게 보일까?" Chrome 자체 DevTools가 메뉴, 패널, 그리고 수많은 기기 프레임을 살펴본 후 답을 제시합니다. 모바일 보기로 전환하면 이러한 여정이 단 한 번의 클릭이나 바로가기로 단축됩니다.
툴바 아이콘을 탭하거나 Alt + M을 누르면 현재 페이지가 휴대폰 크기의 뷰포트로 즉시 제한됩니다. 부드러운 회색 배경이 페이지를 브라우저 창의 나머지 부분과 분리하여 콘텐츠를 돋보이게 하면서 모바일 뷰가 활성화되었음을 시각적으로 알려줍니다. 모서리에 작은 배지가 떠서 현재 기기의 사전 설정을 표시합니다. iPhone 14부터
이 확장 프로그램은 가장 많이 요청되는 세 가지 중단점, 즉 iPhone 14(390x844px), Pixel 7(412x915px), iPad mini(768x1024px)를 지원합니다. 각 프리셋은 메타 뷰포트 태그, 요소 너비 및 스크롤 동작을 조정하여 선택한 기기의 느낌을 구현합니다.
누가 이익을 얻는가?
프런트엔드 개발자는 DevTools를 열지 않고도 몇 초 안에 레이아웃 회귀를 포착할 수 있습니다. 이는 여러 브랜치나 스테이징 서버를 조작할 때 이상적입니다.
UI/UX 디자이너는 엔지니어링 부서에 새로운 Figma 컴포넌트를 전달하기 전에 빠르게 정신건강을 점검합니다.
품질 보증 팀은 자동화된 테스트 모음에 단축키를 스크립팅하여 더욱 빠른 응답성 테스트를 수행할 수 있습니다.
콘텐츠 제작자와 마케터는 뉴스레터, 랜딩 페이지, 소셜 임베드를 미리 보고 작은 화면에서의 가독성을 확인합니다.
모바일 사용자가 보고한 문제를 재현하는 고객 지원 담당자에게 더 이상 물리적 장치나 시뮬레이터가 필요하지 않습니다.
반응형 디자인 개념을 탐구하는 교육자와 학생은 접근하기 쉽고 허가만 받으면 사용할 수 있는 샌드박스를 얻습니다.
출시 직전에 체크아웃 흐름을 미세 조정하든, 야심 찬 개발자들로 가득 찬 교실에서 강의를 하든, 이 확장 기능은 학습 곡선이 거의 없이 워크플로에 딱 들어맞습니다.