Local Overrides
남의 사이트를 내 수정본으로 덮어쓰기
해결하는 문제
웹사이트를 조금 고쳐 보며 시안을 확인하고 싶다.
개발자 도구 Sources 탭의 Local Overrides로 사이트 파일을 내 수정본으로 덮어써 새로고침해도 유지하고, 자주 쓰는 코드는 Snippets에 저장합니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것웹사이트 파일
브라우저가 하는 일내 PC의 수정본으로 바꿔 불러오기
나오는 것수정이 반영된 화면 (내 PC에서만)
쓰는 브라우저 기술
DevTools Sources 탭Local OverridesSnippets
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- 덮어쓸 폴더 지정
- 스니펫 이름 정리
자주 막히는 곳
- 내 PC에서만 바뀌며 실제 사이트는 바뀌지 않는다
- 덮어쓰기를 켜 둔 채 잊으면 혼란이 생긴다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- AI가 제안한 디자인 수정 즉석 검증
웹 서비스
- 웹 접근성 개선 시연
피지컬 AI
- 장비 관리 화면 개선 시안
넓히는 방법
- 개선 시안을 실제 화면 위에서 보여 주기
- AI가 고친 CSS를 바로 적용해 보기
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬안 된다
아이폰 사파리안 된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
이 사이트의 버튼 색과 글자 크기를 바꾼 CSS를 만들어줘. Local Overrides에 붙여 넣어 시안을 확인할 거야.
같은 분류의 능력
09 개발 도구로서의 브라우저에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md