Frokey - Frontend Toolkit

멀티 뷰포트 뷰어 · CSS 인스펙터 · DOM 탐색기 · 브레이크포인트 인디케이터를 제공하는 프론트엔드 개발 도구

Frontier - Frontend Toolkit 더 효율적인 프론트엔드 개발의 시작. 멀티 뷰포트 확인부터 DOM 탐색, CSS 검사까지, 반복되는 개발 작업을 하나의 도구로 해결합니다. ■ 멀티 뷰포트 뷰어 - 현재 페이지를 Mobile / Tablet / Laptop / Desktop 뷰포트로 나란히 미리보기 - 자동 맞춤 줌으로 가로 스크롤 없이 한 화면에서 반응형 확인 - 디바이스 토글, 줌 조절, 일괄 새로고침 지원 ■ CSS 인스펙터 - 요소에 마우스를 올리면 색상, 폰트, 크기, 여백 등 스타일 정보를 즉시 표시 - 클릭 한 번으로 값 복사: Tailwind 클래스(text-gray-500, p-4, rounded-lg), HEX, RGB 형식 선택 가능 - 박스 모델 오버레이(margin / padding / content 색 구분)로 여백 구조를 시각화 ■ DOM 탐색기 - 개발자도구 스타일의 HTML 트리로 요소 구조 확인 - 텍스트와 속성값을 더블클릭으로 즉석 수정하여 화면에서 바로 실험 - 방향키로 부모·자식·형제 요소 이동, 자주 보는 요소는 저장 후 클릭 한 번으로 재선택 - 창 위치(왼쪽/오른쪽/하단) 조절 및 항상 위에 떠 있는 별도 창(PiP)으로 분리 가능 ■ 브레이크포인트 인디케이터 - 현재 뷰포트 너비와 Tailwind 브레이크포인트(sm/md/lg/xl/2xl)를 화면에 상시 표시 ■ 단축키 - Alt+Shift+C로 인스펙터 실행 (변경 가능) - Enter 고정, 방향키 DOM 이동, S 저장, D DOM 창, P 창 분리, ESC 취소 - 주요 단축키는 설정에서 원하는 키로 변경 가능 ■ 개인정보 - 모든 기능은 브라우저 안에서만 동작하며, 어떠한 데이터도 수집하거나 외부로 전송하지 않습니다.