개발자용 크롬 확장: 검사·디버깅·내보내기
이 폰트가 뭔지, JSON이 왜 이렇게 안 읽히는지, 헤딩 구조가 어떤지, 대비가 기준을 통과하는지. 작업하다 반복해서 확인하게 되는 것들을 지금 열어 둔 탭에서 바로 확인하는 확장 프로그램을 모았습니다.
16개 중 7개가 스토어에 출시되어 있습니다.
SEO Toolkit5K+ 사용자All-in-one SEO analysis: on-page score, SERP preview, keyword density, broken links, heading structure, and meta tag viewer.
Download Claude Artifacts - Save Code & Docs5 사용자Download Claude artifacts as files. Save every code block, doc, and app in a conversation with the correct file extension.
BugSnap - 원클릭 버그 리포트 (스크린샷 + 콘솔 로그)2 사용자클릭 한 번으로 스크린샷, 콘솔 에러, 환경 정보를 모아 버그 리포트를 만드세요.
AI Credit Meter - v0, Lovable, BoltTrack your remaining credits on v0, Lovable and Bolt, with burn-rate and a projected run-out date. Read-only, all local.
GitHub Unfollowers & Un-stars TrackerSee who unfollowed you on GitHub, and who un-starred your repo — the thing GitHub never tells you. Official API, all local.
Page Ruler - 웹페이지 픽셀 측정웹페이지의 모든 요소를 픽셀 단위로 측정합니다. 드래그로 영역 측정, 호버로 요소 크기 확인. 디자이너와 개발자를 위한 무료 도구.
Stack Overflow 한국어 (Korean)Stack Overflow의 메뉴·버튼·라벨을 한국어로 번역합니다. 질문·답변 본문과 코드는 그대로 유지합니다.
Color Contrast Checker - WCAG아직 출시 전Check the WCAG contrast ratio between any two colors and see AA/AAA pass or fail. Pick colors from screen, runs locally.
Copy All Links아직 출시 전Grab every link on the page and copy as a list or Markdown, or save a CSV. One click, all local, no tracking.
DeepSeek Exporter — Chats to Markdown아직 출시 전Export any DeepSeek conversation to Markdown, HTML, JSON or PDF, or copy it for Notion. One click, saved locally.
Font Inspector — What Font & Copy CSS아직 출시 전Click text to see its font, weight, size, line-height, spacing and color, then copy as CSS. No network, no account.
Gemini Exporter — Chats to Markdown아직 출시 전Export any Gemini conversation to Markdown, HTML, JSON or PDF, or copy it for Notion. One click, saved locally.
Heading Outline — Page Table of Contents아직 출시 전See the H1–H6 outline of any page in a floating panel and jump to any section with one click. Local, no tracking.
JSON Formatter - Viewer & Beautifier아직 출시 전Auto-format JSON pages with collapsible tree view, syntax highlighting, dark mode, search filter. Best JSON viewer for developers.
Lorem Generator: 더미 텍스트·로렘 입숨·한글아직 출시 전한 번 클릭으로 한국어·영어 더미 텍스트 생성 + 자동 클립보드 복사. 단어/문장/문단 자유 선택.
velog 통계 대시보드 - 전체 글 조회수 모아보기아직 출시 전velog 조회수를 내 글 전체에서 모아 한 표로 보는 통계 대시보드. 좋아요·댓글·작성일까지 정렬하고 글별 조회수와 전체 합계를 한눈에 확인하세요.
고를 때 볼 것
activeTab 방식인지 먼저 봅니다
Font Inspector, Heading Outline, Copy All Links는 activeTab과 scripting만 선언해서 툴바 아이콘을 누르기 전까지는 아무것도 실행되지 않습니다. Page Ruler는 activeTab과 storage만 선언하고 호스트 권한이 없지만, 콘텐츠 스크립트는 모든 사이트에 등록되어 있습니다. 다만 Start Measuring을 누르기 전에는 화면에 아무것도 그리지 않습니다. 반면 설치 시점에 모든 사이트 접근을 요구하는 SEO Toolkit, BugSnap, JSON Formatter는 사내 어드민이나 스테이징 페이지에서도 항상 함께 로드됩니다. chrome://extensions에서 확장별 사이트 접근을 '클릭할 때'로 바꾸면 필요할 때만 동작하게 만들 수 있습니다.
버그 리포트에는 생각보다 많은 게 담깁니다
BugSnap은 스크린샷, 콘솔 로그, 환경 정보를 하나의 리포트로 묶습니다. 콘솔에는 인증 토큰이나 사용자 ID, 이메일이 그대로 찍혀 있는 경우가 흔하고 스크린샷에는 화면에 떠 있던 다른 것들도 함께 들어갑니다. 여러 사람이 보는 이슈에 붙이기 전에 내용을 한 번 확인하세요.
JSON 뷰어는 원본 응답 화면을 대체합니다
JSON Formatter는 raw JSON이 렌더링되는 페이지를 가져가 접었다 펼 수 있는 트리로 바꿉니다. 두 가지를 확인하세요. 필요할 때 view-source: 나 확장 끄기로 원문 텍스트에 다시 접근할 수 있는지, 그리고 응답이 클 때 어떻게 동작하는지입니다. 파싱과 렌더링이 모두 그 탭 안에서 일어나기 때문입니다.
API 기반 대시보드는 그 API의 제약을 그대로 받습니다
GitHub Unfollowers는 api.github.com을, velog 통계 대시보드와 AI Credit Meter는 이미 로그인되어 있는 사이트를 읽고, 호스트 권한에도 해당 도메인만 적혀 있습니다. 내 세션이나 토큰이 볼 수 있는 범위까지만 보이고 rate limit도 동일하게 걸립니다. 토큰 입력을 요구한다면 부여하는 권한 범위가 그 도구가 할 수 있는 일의 상한선입니다.
자주 묻는 질문
웹사이트 폰트 확인하는 크롬 확장 프로그램이 있나요?
이 카테고리에서는 Font Inspector가 그 역할을 합니다. 텍스트를 클릭하면 실제 적용된 폰트 패밀리와 굵기, 크기, 행간, 자간, 색상을 보여 주고 CSS로 복사해 줍니다. 페이지의 computed style을 읽는 방식이라 font-family 목록의 첫 이름이 아니라 실제로 렌더링되고 있는 폰트를 알려 줍니다.
개발자 도구로도 되는데 확장이 필요한가요?
대부분은 개발자 도구로 됩니다. Elements 패널을 이미 편하게 쓰고 있다면 굳이 없어도 됩니다. 차이는 단계 수와 사용자입니다. 간격을 재거나 헤딩 구조를 뽑거나 페이지의 링크를 전부 복사하는 일이 여기서는 클릭 한 번입니다. 개발자 도구를 열면 뷰포트가 바뀌어 반응형 확인에 방해가 된다는 점도 실제로는 꽤 큽니다.
'방문한 웹사이트의 모든 데이터 읽기 및 변경'은 무슨 뜻인가요?
호스트 권한과 스크립트 삽입 기능을 크롬이 한 문장으로 요약한 것으로, 실제 동작이 아니라 가능한 범위를 뜻합니다. 그 페이지에서 코드를 실행할 수 있다는 의미입니다. 범위를 줄이려면 chrome://extensions에서 확장별 사이트 접근을 '클릭할 때' 또는 '특정 사이트'로 바꾸면 되고, activeTab만 선언한 확장들은 기본적으로 이미 그렇게 동작합니다.
회사 노트북에 설치해도 괜찮을까요?
먼저 회사 정책을 확인해야 합니다. 관리형 크롬 프로필은 허용 목록을 두는 경우가 많아 목록에 없는 확장은 아예 설치되지 않습니다. 정책과 별개로 현실적인 문제는 모든 사이트 접근 권한을 가진 확장이 사내 도구 화면까지 함께 본다는 점입니다. 업무용 크롬 프로필을 따로 두는 것이 가장 간단한 분리 방법입니다.