카테고리: 개발
DevTools 브라우저 테스트
Chrome DevTools MCP로 에이전트가 실제 브라우저의 DOM, 콘솔, 네트워크, 성능을 직접 보고 검증하게 하는 스킬입니다.
할 수 있는 일
- DOM 검사와 화면 결과 확인
- 콘솔 오류, 네트워크 요청·응답 분석
- Core Web Vitals, 레이아웃 이동 등 성능 측정
- 수정한 내용이 실제 브라우저에서 동작하는지 검증
이런 때 쓰세요
프런트엔드 버그를 코드만 보고 추측하지 않고 실제 실행 결과로 확인하고 싶을 때 씁니다. chrome-devtools MCP 서버 설정이 필요합니다.
설치 방법
- 터미널에서 아래 명령을 실행합니다. 사용하는 에이전트(Claude Code, Codex, Cursor, Gemini CLI, Copilot 등)를 고르면 맞는 폴더에 설치됩니다.
npx skills add https://github.com/addyosmani/agent-skills --skill browser-testing-with-devtools
- 직접 설치하려면 GitHub 저장소에서
browser-testing-with-devtools스킬 폴더를 내려받아~/.claude/skills/나.cursor/skills/같은 에이전트의 skills 폴더에 복사합니다. - 에이전트에게 관련 작업을 요청하면 스킬이 자동으로 사용됩니다.