Chrome에 추가

궁극의 개발자 도구 확장 프로그램 웹 디자인 및 개발을 위한

39+개의 강력한 도구로 브라우저에서 직접 웹 페이지를 검사, 측정, 캡처, 분석 및 디자인할 수 있습니다.

Chrome에 추가 Firefox Browser logo Firefox Browser logo Firefox에 추가 Edge에 추가
도구 검색...
전체 즐겨찾기 검사 캡처 측정 index.popup_tab_analyse
CSS Inspector
애니메이션 인스펙터
Tailwind로 복사
아웃라인 전용 모드
Tailwind 헬퍼
페이지 아웃라이너
컴포넌트 감지
요소 이동
요소 삭제/숨기기
요소 내보내기
컴포넌트 복사..
스크린샷
이미지 추출
SVG Grabber
이미지 교체
QR 코드 생성기
Pro로 업그레이드
39 도구
시작하기

몇 번의 클릭만으로 DevSuite Pro 사용 시작

시작하기는 매우 간단합니다. 확장 프로그램을 설치하고 아무 웹 페이지나 열어 팝업 또는 플로팅 독에서 39+개의 개발자 도구에 접근하세요. 별도의 설정이 필요 없습니다.

Chrome에 확장 프로그램 추가

  1. Chrome 웹 스토어를 열고 "DevSuite Pro" 확장 프로그램을 검색합니다.
  2. "Chrome에 추가"를 클릭한 다음 팝업 창에서 "확장 프로그램 추가"를 클릭하여 확인합니다.

아무 웹 페이지나 열어 도구 실행

  1. 아무 웹사이트로 이동한 다음 도구 모음에서 DevSuite Pro 아이콘을 클릭하거나 페이지의 플로팅 독을 사용합니다.
  2. 그리드에서 아무 도구나 선택합니다. CSS Inspector, 눈금자, 색상 선택기 같은 도구는 현재 페이지에서 즉시 활성화됩니다.
확장 프로그램 기능

DevSuite Pro의 주요 기능

DevSuite Pro는 웹 페이지를 검사, 측정, 디자인 및 분석하기 위한 39+개의 개발자 도구를 제공합니다. 브라우저에 내장된 강력한 기능으로 작업 흐름을 향상시키세요.

CSS Inspector

아무 요소 위에 마우스를 올리면 CSS 스타일을 즉시 보고 편집할 수 있어 실시간으로 디자인을 디버그하고 조정하기 쉽습니다.

더 알아보기 →
요소 인스펙터

아무 요소나 클릭하여 속성, 크기, 간격, 글꼴, 색상을 검사합니다. 브라우저 DevTools를 열지 않고도 페이지 구조를 즉시 파악할 수 있습니다.

눈금자 및 가이드

거리를 측정하고, 정렬을 확인하고, 아무 웹 페이지에나 픽셀 단위의 정확한 눈금자와 가이드를 추가하여 완벽한 디자인 정렬을 보장합니다.

색상 선택기

페이지의 아무 요소에서나 색상을 선택하고 한 번의 클릭으로 HEX, RGB, HSL 값을 클립보드에 복사할 수 있습니다.

스크린샷 캡처

아무 웹 페이지의 전체 페이지 또는 보이는 영역의 스크린샷을 캡처하여 즉시 다운로드할 수 있으며, 디자인 공유 및 버그 보고에 완벽합니다.

반응형 테스터

브라우저를 벗어나지 않고 다양한 화면 크기와 장치 해상도에서 웹 페이지를 미리 보고 반응형 디자인을 테스트할 수 있습니다.

다른 도구 더 알아보기:
CSS 검사기 무료

실시간 CSS 스타일 검사 및 편집

애니메이션 검사기 프로

실시간으로 CSS 애니메이션 디버그 및 제어

Tailwind로 복사 프로

요소의 CSS를 Tailwind 유틸리티 클래스로 변환

아웃라인 모드 무료

페이지의 전체 레이아웃 구조를 시각화

Tailwind 도우미 프로

요소별 Tailwind 클래스 카테고리별 분류

페이지 아웃라이너 무료

웹 페이지에 HTML 트리 뷰 오버레이 표시

컴포넌트 탐지기 프로

React, Vue, Angular, Svelte 컴포넌트 자동 감지

요소 이동 프로

요소를 드래그하여 페이지에서 자유롭게 이동

요소 삭제/숨기기 무료

요소 삭제 또는 숨기기

요소 내보내기 프로

요소를 HTML, CSS 또는 JSON으로 내보내기

컴포넌트 코드 복사 프로

요소를 React, Vue, Svelte 컴포넌트 코드로 변환

스크린샷 무료

보이는 영역 또는 전체 페이지 스크린샷 캡처

이미지 추출 무료

웹 페이지의 모든 이미지 보기, 선택 및 다운로드

SVG 추출기 프로

페이지의 모든 SVG 찾기, 미리보기 및 다운로드

이미지 교체 프로

페이지의 아무 이미지나 자신의 이미지로 교체

QR 코드 생성기 무료

URL이나 텍스트로 QR 코드 즉시 생성

페이지 눈금자 무료

픽셀 정확한 눈금자, 가이드 및 측정 도구

반응형 뷰어 프로

여러 디바이스 뷰포트를 동시에 미리보기

거리 측정 무료

페이지상의 요소 간 정확한 픽셀 거리 측정

Z-Index 검사기 프로

모든 스태킹 컨텍스트와 z-index 레이어 시각화

Grid/Flex 시각화 프로

CSS Grid와 Flexbox 레이아웃을 시각적 오버레이로 검사

히트맵 시뮬레이터 프로

사용자 주의 집중 핫스팟 시뮬레이션

브라우징 데이터 삭제 무료

캐시, 쿠키, localStorage, sessionStorage 선택적으로 지우기

기술 스택 프로

웹사이트 뒤에 숨겨진 모든 기술 감지

SEO 검사기 무료

종합 SEO 감사: 메타 태그, 헤딩, OpenGraph 등

접근성 검사기 프로

자동 WCAG 감사: 대비, alt 텍스트, ARIA 등

실시간 텍스트 편집기 무료

페이지의 아무 텍스트나 클릭하여 즉시 편집

글꼴 변경기 프로

Google Fonts에서 전역 또는 요소별로 폰트 교체

모든 글꼴 목록 무료

웹 페이지에서 사용 중인 모든 폰트 발견

색상 선택기 무료

HEX, RGB, HSL 색상 값을 위한 정밀 아이드롭퍼

색상 팔레트 무료

웹 페이지에서 완전한 색상 팔레트 추출

다크 모드 강제 무료

어떤 웹사이트든 즉시 다크 모드 적용

JavaScript 토글 무료

현재 탭에서 JavaScript를 즉시 활성화/비활성화

쿠키 편집기 무료

도메인별 쿠키 보기, 편집, 추가, 삭제

콘솔 로거 무료

DevTools 없이 플로팅 패널에서 콘솔 출력 보기

네트워크 모니터 프로

실시간으로 모든 네트워크 요청 모니터링

로컬 스토리지 편집기 무료

localStorage와 sessionStorage 보기, 편집, 추가, 삭제

깨진 링크 검사기 프로

페이지의 모든 링크를 스캔하여 깨진 링크 찾기

페이지 성능 무료

즉시 성능 대시보드: 로드 시간, DOM 통계, 리소스 분석

JSON Formatter 무료

Format, Minify & Validate JSON in a Click

64 Base64 Encode / Decode 무료

Encode Strings To & From Base64 Instantly

URL Encoder / Decoder 무료

Encode & Decode URL Strings in One Click

& HTML Entity Encoder 무료

Encode & Decode HTML Entities Instantly

Backslash Escape / Unescape 무료

Escape & Unescape Strings for Code

64 Image ↔ Base64 무료

Convert Images To & From Base64 Data URIs

JWT Debugger 무료

Decode JSON Web Tokens Instantly

UUID Generator 무료

Generate Bulk UUID v4 Identifiers

Hash Generator 무료

Compute MD5, SHA-1, SHA-256, SHA-384, SHA-512 Hashes

Password Generator 무료

Generate Cryptographically Strong Passwords

Regex Tester 무료

Test Regular Expressions Live With Match Highlighting

Timestamp Converter 무료

Convert Unix, ISO, and Human-Readable Dates

Diff Tool 무료

Compare Two Text Blocks Line By Line

Contrast Checker 무료

Check WCAG Contrast Ratio of Any Two Colors

Color Format Converter 무료

Convert HEX, RGB, HSL, HSV & OKLCH Instantly

Image Color Extractor 무료

Extract The Dominant Palette From Any Image

DOM Path Finder 프로

Get CSS Selectors & XPath For Any Element

CORS Checker 무료

Test Cross-Origin Requests & Inspect CORS Headers

WebSocket Inspector 프로

Capture WebSocket Frames in Real Time

Broken Image Finder 무료

Scan The Page For Broken Images Instantly

Form Filler 프로

Auto-Fill Forms With Realistic Test Data

CSV ↔ JSON Converter 무료

Convert Between CSV and JSON in Either Direction

XML Formatter 무료

Format, Validate & View XML With Syntax Highlighting

SQL Formatter 무료

Beautify & Format SQL Queries

Convert to PDF 무료

Save Web Pages As Clean PDFs

가격 및 요금제

심플하고 투명한 가격 정책

워크플로우에 맞는 요금제를 선택하세요. 무료로 시작하고 언제든지 업그레이드하세요.

베이직

DevSuite Pro를 체험해보기에 적합합니다. 신용카드가 필요하지 않습니다.

$0

평생 무료
무료로 시작하기
  • 20개의 무료 개발자 도구
  • CSS Inspector 및 색상 선택기
  • 스크린샷 캡처
  • 플로팅 독 인터페이스
  • 모든 향후 무료 업데이트
월간 가장 인기 있는

모든 39+개 전문 도구에 대한 전체 액세스. 매월 청구.

$2.99

매월
월간 요금제 시작
  • 모든 39+개 개발자 도구
  • Pro 도구 전체 액세스
  • 최대 3대의 기기
  • 우선 지원
  • 언제든지 취소 가능
일회성 최고의 가치

한 번 결제하고 영원히 사용하세요. 반복 요금 없이 39개 이상의 모든 프로 도구에 완전한 접근.

$29.99

일회성 결제
한 번 구매하고 영원히 사용
  • 모든 39+개 개발자 도구
  • Pro 도구 전체 액세스
  • 최대 3대의 기기
  • 우선 지원
  • 반복 요금 없음
DevSuite Pro FAQ section background
자주 묻는 질문

DevSuite Pro 사용자들이 자주 묻는 질문

DevSuite Pro 확장 프로그램의 기능과 사용법에 대한 일반적인 질문입니다. 궁금한 점이 있으시면 아래에서 답변을 찾으실 수 있습니다.

DevSuite Pro는 어떻게 설치하나요?

Chrome 웹 스토어를 방문하여 "DevSuite Pro"를 검색하고 "Chrome에 추가"를 클릭한 다음 "확장 프로그램 추가"를 선택하여 확인합니다. 설치가 완료되면 브라우저 도구 모음에 확장 프로그램 아이콘이 나타납니다. 클릭하면 39+개의 개발자 도구에 즉시 접근할 수 있습니다.

무료 도구와 Pro 도구의 차이점은 무엇인가요?

무료 도구(20+개)는 라이선스 없이 누구나 사용할 수 있습니다. Pro 도구는 금색 PRO 배지가 표시되며 활성 Pro 라이선스가 필요합니다. 팝업에서 어떤 도구가 무료인지 Pro인지 확인할 수 있습니다. 무료 도구에는 자물쇠 아이콘이 없지만, Pro 도구는 라이선스를 활성화할 때까지 약간 어둡게 표시됩니다.

일부 웹사이트에서 도구가 작동하지 않는 이유는 무엇인가요?

일부 웹사이트에는 특정 브라우저 확장 프로그램 작동을 차단하는 엄격한 콘텐츠 보안 정책(CSP)이 있습니다. 이는 은행 및 정부 사이트에서 특히 흔합니다. 또한 Chrome 내부 페이지(chrome://)는 확장 프로그램의 실행을 허용하지 않습니다.

페이지에 대한 변경 사항은 영구적인가요?

아닙니다. 요소 이동, 라이브 텍스트 편집기, 요소 삭제/숨기기, CSS Inspector 같은 도구로 수행한 모든 변경 사항은 임시적입니다. 현재 브라우저에서 보고 있는 화면에만 영향을 미칩니다. 페이지를 새로고침하면 모든 것이 복원됩니다.

Pro 라이선스는 어떻게 활성화하나요?

DevSuite Pro 팝업을 열고 오른쪽 상단 모서리에 있는 설정 아이콘을 클릭합니다. 라이선스 섹션으로 스크롤하여 라이선스 키를 붙여넣고 '활성화'를 클릭합니다. 키가 유효하면 배지가 FREE에서 PRO로 바뀌고 모든 Pro 도구가 즉시 잠금 해제됩니다.

플로팅 독을 이동하거나 숨기려면 어떻게 하나요?

설정으로 이동하여 다른 사이드바 위치(위, 아래, 왼쪽, 오른쪽)를 선택하여 독을 이동할 수 있습니다. 또한 설정에서 '페이지에 독 표시'를 끄거나 언제든지 Ctrl+Shift+X를 눌러 독을 숨길 수 있습니다.

DevSuite Pro는 브라우징 데이터를 수집하나요?

아닙니다. DevSuite Pro는 브라우징 데이터를 수집, 추적 또는 전송하지 않습니다. 모든 설정은 브라우저 내에 로컬로 저장됩니다. 유일한 외부 요청은 라이선스 키 검증을 위한 서버와의 통신뿐입니다.

DevSuite Pro를 Firefox에서 사용할 수 있나요?

네! DevSuite Pro는 Chrome 웹 스토어와 Firefox 부가 기능 모두에서 사용할 수 있습니다. Chrome, Edge, Brave와 같은 Chromium 기반 브라우저는 물론 Firefox에서도 작동합니다.