CSS Inspector
아무 요소 위에 마우스를 올리면 CSS 스타일을 즉시 보고 편집할 수 있어 실시간으로 디자인을 디버그하고 조정하기 쉽습니다.
더 알아보기 →
요소 인스펙터
아무 요소나 클릭하여 속성, 크기, 간격, 글꼴, 색상을 검사합니다. 브라우저 DevTools를 열지 않고도 페이지 구조를 즉시 파악할 수 있습니다.
더 알아보기 →
눈금자 및 가이드
거리를 측정하고, 정렬을 확인하고, 아무 웹 페이지에나 픽셀 단위의 정확한 눈금자와 가이드를 추가하여 완벽한 디자인 정렬을 보장합니다.
더 알아보기 →
색상 선택기
페이지의 아무 요소에서나 색상을 선택하고 한 번의 클릭으로 HEX, RGB, HSL 값을 클립보드에 복사할 수 있습니다.
더 알아보기 →
스크린샷 캡처
아무 웹 페이지의 전체 페이지 또는 보이는 영역의 스크린샷을 캡처하여 즉시 다운로드할 수 있으며, 디자인 공유 및 버그 보고에 완벽합니다.
더 알아보기 →
반응형 테스터
브라우저를 벗어나지 않고 다양한 화면 크기와 장치 해상도에서 웹 페이지를 미리 보고 반응형 디자인을 테스트할 수 있습니다.
더 알아보기 →
실시간 CSS 스타일 검사 및 편집
CSS Inspector는 마우스를 올리는 것만으로 모든 요소의 전체 CSS 속성을 볼 수 있는 강력한 개발자 도구입니다. 클릭하여 스타일을 고정하고, 직접 편집하고, 변경 사항이 페이지에 즉시 반영되는 것을…
실시간으로 CSS 애니메이션 디버그 및 제어
Animation Inspector는 웹 페이지에서 실행 중인 모든 CSS 애니메이션과 트랜지션을 완벽하게 제어할 수 있게 해줍니다. 한 번에 모든 애니메이션을 일시 정지하거나, 프레임 단위로 느리게 재생하여…
요소의 CSS를 Tailwind 유틸리티 클래스로 변환
Copy as Tailwind는 시각적 디자인과 Tailwind CSS 코드 사이의 간격을 메워줍니다.
페이지의 전체 레이아웃 구조를 시각화
Outline Only Mode는 웹 페이지의 모든 HTML 요소에 색상으로 구분된 테두리 아웃라인을 추가하여 페이지 레이아웃 구조를 X-ray처럼 즉시 보여줍니다. 모든 div, section, header…
요소별 Tailwind 클래스 카테고리별 분류
Tailwind Helper는 웹 페이지의 아무 요소를 검사하여 Tailwind CSS 유틸리티 클래스를 카테고리별로 상세하게 분류하여 보여줍니다. 단순한 클래스 문자열이 아닌 Layout, Spacing…
웹 페이지에 HTML 트리 뷰 오버레이 표시
Page Outliner는 웹 페이지의 전체 DOM 구조를 시각적인 트리 오버레이로 페이지 위에 직접 렌더링합니다.
React, Vue, Angular, Svelte 컴포넌트 자동 감지
Component Detector는 웹사이트가 어떤 프론트엔드 프레임워크를 사용하는지 자동으로 식별하고, 전체 컴포넌트 트리를 보여줍니다. React, Vue, Angular, Svelte 컴포넌트 이름…
요소를 드래그하여 페이지에서 자유롭게 이동
Move Element는 웹 페이지의 아무 요소나 클릭한 후 새로운 위치로 드래그할 수 있게 해줍니다.
요소 삭제 또는 숨기기
Delete/Hide Element는 웹 페이지의 아무 요소나 한 번 클릭으로 삭제하거나 임시로 숨길 수 있게 해줍니다.
요소를 HTML, CSS 또는 JSON으로 내보내기
Export Element는 웹 페이지의 아무 요소나 클릭하여 해당 요소의 완전한 구조를 세 가지 형식으로 내보낼 수 있게 해줍니다: 모든 자식과 속성을 포함한 원시 HTML 마크업, 깔끔한 스타일시트 형태의…
요소를 React, Vue, Svelte 컴포넌트 코드로 변환
Copy Component Code는 웹 페이지의 아무 요소를 클릭하여 선택한 프레임워크에 맞는 생산 준비가 된 컴포넌트 파일로 즉시 변환해줍니다. 요소를 클릭하면 React JSX 컴포넌트, Vue Single…
보이는 영역 또는 전체 페이지 스크린샷 캡처
Screenshot 도구는 웹 페이지의 고품질 이미지를 두 가지 모드로 캡처합니다: 보이는 영역(브라우저 창에 현재 보이는 부분) 또는 전체 페이지(폴드 아래 콘텐츠까지 포함). 스크린샷은 고해상도 PNG 파일로…
웹 페이지의 모든 이미지 보기, 선택 및 다운로드
Extract Images는 웹 페이지를 스캔하여 모든 이미지를 브라우저블 갤러리로 보여줍니다.
페이지의 모든 SVG 찾기, 미리보기 및 다운로드
SVG Grabber는 웹 페이지에 있는 모든 SVG를 찾아줍니다.
페이지의 아무 이미지나 자신의 이미지로 교체
Image Replacer는 웹 페이지의 아무 이미지를 클릭한 후 자신의 이미지로 교체할 수 있게 해줍니다.
URL이나 텍스트로 QR 코드 즉시 생성
QR Code Generator는 현재 페이지 URL로 자동으로 스캔 가능한 QR 코드를 생성합니다.
픽셀 정확한 눈금자, 가이드 및 측정 도구
Page Ruler는 웹 페이지에 Photoshop 스타일의 눈금자와 드래그 가능한 가이드 라인을 추가합니다.
여러 디바이스 뷰포트를 동시에 미리보기
Responsive Viewer는 현재 웹 페이지를 여러 디바이스 뷰포트 크기로 동시에 나란히 보여줍니다.
페이지상의 요소 간 정확한 픽셀 거리 측정
Measure Distance는 웹 페이지에서 두 요소 사이의 정확한 수평, 수직, 대각선 거리를 픽셀 단위로 측정할 수 있는 도구입니다. 요소를 클릭하거나 드래그하여 선택하면 실시간으로 거리, 각도, ΔX, ΔY…
모든 스태킹 컨텍스트와 z-index 레이어 시각화
Z-Index Inspector는 웹 페이지의 모든 요소 스태킹 순서를 완전히 드러냅니다.
CSS Grid와 Flexbox 레이아웃을 시각적 오버레이로 검사
Grid/Flex Visualizer는 웹 페이지의 모든 CSS Grid와 Flexbox 컨테이너를 자동으로 감지하고, 레이아웃 구조를 페이지 위에 색상 오버레이로 렌더링합니다. 그리드 라인, 트랙 크기, 갭 값…
사용자 주의 집중 핫스팟 시뮬레이션
Heatmap Simulator는 기존 UX 연구 패턴(F패턴 읽기 행동, 시각적 계층 원칙, 인터랙티브 요소 가중치)을 기반으로 웹 페이지의 예상 주의 집중 히트맵을 생성합니다. 사용자가 가장 많이 보고, 읽고…
캐시, 쿠키, localStorage, sessionStorage 선택적으로 지우기
Clear Browsing Data는 현재 사이트에 대해 캐시, 쿠키, localStorage, sessionStorage 등 특정 유형의 브라우징 데이터를 빠르고 선택적으로 지울 수 있게 해줍니다. 브라우�…
웹사이트 뒤에 숨겨진 모든 기술 감지
Site Stack은 어떤 웹사이트든 스캔하여 완전한 기술 스택을 식별합니다.
종합 SEO 감사: 메타 태그, 헤딩, OpenGraph 등
SEO Inspector는 웹 페이지에 대한 즉각적이고 포괄적인 SEO 감사를 제공합니다.
자동 WCAG 감사: 대비, alt 텍스트, ARIA 등
Accessibility Inspector는 웹 페이지에 대해 WCAG 2.1 Level AA 자동 검사를 실행하고 접근성 문제를 카테고리별로 정리된 보고서로 제공합니다. 색상 대비 부족, 이미지 alt 텍스트…
페이지의 아무 텍스트나 클릭하여 즉시 편집
Live Text Editor는 웹 페이지의 모든 텍스트 요소를 한 번 클릭으로 편집 가능하게 만듭니다.
Google Fonts에서 전역 또는 요소별로 폰트 교체
Fonts Changer는 웹 페이지의 어떤 폰트든 Google Fonts 라이브러리에서 다른 폰트로 교체할 수 있게 해줍니다.
웹 페이지에서 사용 중인 모든 폰트 발견
List All Fonts는 웹 페이지를 스캔하여 사용 중인 모든 폰트 패밀리를 완전하게 인벤토리 형태로 보여줍니다.
HEX, RGB, HSL 색상 값을 위한 정밀 아이드롭퍼
Color Picker는 웹 페이지의 텍스트, 배경, 이미지, 그라데이션 등 어떤 가시 픽셀에서든 픽셀 단위로 정확한 색상을 추출할 수 있는 아이드롭퍼 도구입니다. HEX, RGB, HSL 형식으로 동시에 정확한…
웹 페이지에서 완전한 색상 팔레트 추출
Color Palette는 웹 페이지의 모든 요소를 스캔하여 사용된 모든 색상을 추출합니다.
어떤 웹사이트든 즉시 다크 모드 적용
Force Dark Mode는 다크 모드를 제공하지 않는 웹사이트에 어두운 색상 스킴을 적용하거나, 기존 라이트 테마를 덮어씁니다. 도구는 배경색을 지능적으로 어두운 톤으로 반전시키고, 가독성을 위해 텍스트 색상을…
현재 탭에서 JavaScript를 즉시 활성화/비활성화
Toggle JavaScript는 현재 브라우저 탭에서 JavaScript 실행을 한 번의 클릭으로 비활성화하거나 다시 활성화합니다. 변경 후 페이지가 자동으로 새로고침됩니다. JavaScript 없이 페이지�…
도메인별 쿠키 보기, 편집, 추가, 삭제
Cookie Editor는 현재 도메인의 모든 쿠키를 깔끔하고 정렬 가능한 테이블로 표시합니다.
DevTools 없이 플로팅 패널에서 콘솔 출력 보기
Console Logger는 모든 콘솔 출력(console.log, console.warn, console.error, console.info)을 캡처하여 페이지 위에 직접 표시되는 플로팅 패널에 보여줍니다…
실시간으로 모든 네트워크 요청 모니터링
Network Monitor는 현재 페이지에서 발생하는 모든 네트워크 요청(XHR/Fetch API 호출, 스크립트 로드, 스타일시트 가져오기, 이미지 다운로드, 폰트 파일 등)을 캡처하여 실시간으로 업데이트되�…
localStorage와 sessionStorage 보기, 편집, 추가, 삭제
Local Storage Editor는 현재 사이트의 localStorage와 sessionStorage 항목을 깔끔한 테이블 인터페이스로 관리할 수 있게 해줍니다. 모든 키-값 쌍을 둘러보고, 값을 인라인으로…
페이지의 모든 링크를 스캔하여 깨진 링크 찾기
Broken Link Checker는 현재 페이지의 모든 링크(앵커 href, 이미지 소스, 스크립트 소스, 스타일시트 참조 등)를 스캔하고, 깨진 참조(404, 타임아웃, 연결 오류 등)를 확인합니다. 결과�…
즉시 성능 대시보드: 로드 시간, DOM 통계, 리소스 분석
Page Performance는 웹 페이지의 즉각적인 성능 개요를 제공합니다.
클릭 한 번으로 JSON 포맷팅, 미니파이 및 검증
JSON Formatter는 브라우저에서 직접 JSON을 보기 좋게 정렬(pretty-print), 압축(minify) 및 검증합니다.
문자열을 Base64로 즉시 인코딩 및 디코딩
Base64 인코더/디코더는 브라우저에서 직접 텍스트를 Base64로, Base64를 다시 텍스트로 변환합니다.
원클릭으로 URL 문자열 인코딩 및 디코딩
URL 인코더/디코더는 URL 문자열을 퍼센트 인코딩(percent-encoding) 형식으로 변환하거나 다시 원래대로 되돌립니다. 디버깅, 안전한 URL 빌드, 인코딩된 링크 검사 등 목적에 따라…
즉각적인 HTML 엔티티 인코딩 및 디코딩
HTML 엔티티 인코더는 특수 문자(< > & " ')를 해당하는 HTML 엔티티(< > & " ')로 변환하거나 그 반대로 변환합니다. 사용자 콘텐츠의 안전한 렌더링, 문서에…
코드를 위한 문자열 이스케이프 및 언이스케이프
백슬래시 이스케이프/언이스케이프는 문자열을 이스케이프된 형식(\n \t \r \" \' \\ 및 유니코드 이스케이프)으로 변환하거나 다시 원래대로 되돌립니다. JavaScript, Python, Go 또는 JSON…
이미지를 Base64 데이터 URI로 상호 변환
이미지 ↔ Base64 도구는 이미지 파일(PNG, JPG, SVG, WebP, GIF)을 Base64로 인코딩된 데이터 URI로 변환하거나 그 반대로 변환합니다. 이미지를 드래그, 붙여넣기 또는 클릭하여 로드하고…
즉각적인 JSON Web Token 디코딩
JWT 디버거는 JSON Web Token(JWT)을 디코딩하고 검사합니다.
벌크 UUID v4 식별자 생성
UUID 생성기는 브라우저의 crypto API를 사용하여 암호학적으로 강력한 UUID v4 식별자를 생성합니다.
MD5, SHA-1, SHA-256, SHA-384, SHA-512 해시 계산
해시 생성기는 입력된 텍스트의 암호학적 해시(MD5, SHA-1, SHA-256, SHA-384, SHA-512)를 계산합니다.
암호학적으로 강력한 비밀번호 생성
비밀번호 생성기는 브라우저의 암호학적 난수 API를 사용하여 강력하고 무작위한 비밀번호를 만듭니다.
실시간 매칭 하이라이트와 함께 정규식 테스트
정규식 테스터는 입력한 텍스트에 대해 정규식(Regex)을 실시간으로 평가합니다.
Unix, ISO 및 사람이 읽기 쉬운 날짜 변환
타임스탬프 변환기는 Unix 타임스탬프(초, 밀리초, 마이크로초, 나노초), ISO 8601, RFC 2822 및 사람이 읽기 쉬운 형식 간의 상호 변환을 지원합니다. 실시간 현재 시간 표시, 타임존 토글(로컬 /…
두 텍스트 블록을 라인별로 비교
디프 도구는 두 텍스트 블록을 비교하여 추가, 삭제 및 변경되지 않은 라인을 색상별로 표시합니다.
임의의 두 색상에 대한 WCAG 대비비 확인
대비 검사기는 두 색상 간의 WCAG 2.1 대비비를 계산하고, 일반 텍스트와 큰 텍스트에 대해 AA/AAA 등급 기준을 충족하는지 평가합니다. 실시간 미리보기를 통해 선택한 색상이 적용된 텍스트를 볼 수 있으며…
HEX, RGB, HSL, HSV, OKLCH 간의 즉각적인 변환
색상 형식 변환기는 HEX, RGB, HSL, HSV, OKLCH 간의 상호 변환을 지원합니다.
이미지에서 주요 팔레트 추출
이미지 색상 추출기는 이미지 파일(드래그, 붙여넣기 또는 클릭하여 로드)을 분석하여 가중치(백분율)와 함께 최대 16개의 주요 색상을 반환합니다. 브라우저 내 픽셀 샘플링과 버킷 양자화(bucket…
모든 요소의 CSS 선택자 및 XPath 가져오기
DOM 경로 탐색기를 사용하면 페이지의 모든 요소 위에 마우스를 올려 고유한 CSS 선택자, 축약 선택자, XPath 및 바로 사용할 수 있는 querySelector 스니펫을 확인할 수 있습니다. 요소를 클릭하여…
교차 출처 요청 테스트 및 CORS 헤더 검사
CORS 검사기는 현재 사이트에서의 교차 출처(Cross-Origin) 요청이 대상 서버에서 허용되는지 테스트합니다.
실시간 WebSocket 프레임 캡처
WebSocket 검사기는 페이지의 모든 연결에서 송수신되는 모든 WebSocket 프레임을 캡처합니다.
페이지 내 손상된 이미지 즉시 스캔
엑박 탐색기는 페이지 내 모든 <img> 태그와 CSS background-image를 스캔하여 로드 실패(404, CORS 오류 등)를 감지하고 목록으로 보여줍니다. 전체/손상됨/CSS 배경별로 필터링하고, 각…
실감 나는 테스트 데이터로 양식 자동 입력
폼 필러는 이름, 이메일, 전화번호, 주소, 비밀번호 등 실감 나는 테스트 데이터로 페이지 내 모든 양식 필드를 채워줍니다. 필드 유형, 이름, ID, 자동 완성(autocomplete), 플레이스홀더 힌트 등을…
CSV와 JSON 간의 양방향 변환
CSV ↔ JSON 변환기는 가장 흔한 두 가지 데이터 형식 간의 상호 변환을 지원합니다.
XML 포맷팅, 유효성 검사 및 구문 강조
XML 포맷터는 브라우저 내에서 XML을 예쁘게 출력(Pretty-print), 압축(Minify) 및 유효성 검사를 수행합니다.
SQL 쿼리 정리 및 포맷팅
SQL 포맷터는 압축되어 있거나 읽기 힘든 SQL을 들여쓰기가 적용된 가독성 좋은 쿼리로 변환합니다.
웹 페이지를 깔끔한 PDF로 저장
Convert to PDF는 브라우저의 인쇄 대화상자를 통해 현재 웹 페이지를 PDF로 저장합니다.
