Chrome DevTools MCP

Source: Dev.to

확장 프로그램 설치

확장 프로그램 창을 엽니다 (Ctrl + Shift + X)
@mcp devtools 를 검색합니다
ChromeDevTools 를 설치합니다

MCP 서버가 실행 중인지 확인

설치된 확장 프로그램을 오른쪽 클릭하여 작업 메뉴(시작/중지/재시작/구성)를 엽니다.
AI 에이전트가 컨텍스트를 가질 수 있도록 프로젝트 폴더를 IDE에서 엽니다.

다음 명령을 실행할 수도 있습니다:

npx chrome-devtools-mcp@latest --help

사용 가능한 모든 구성 옵션을 확인하려면 위 명령을 사용하세요.

사용 방법

IDE에서 Copilot 채팅을 열고 예를 들어 다음과 같이 물어봅니다:

• “내 폼이 가운데 정렬되지 않는 이유가 뭐야?”
• “이 폼 제출을 모든 입력값으로 테스트해줘.”
• “폼에 오류 메시지가 표시될 때 레이아웃이 이동하는지 확인해줘.”
• “LCP를 개선해줘.”

도구

MCP는 AI 에이전트에게 다양한 도구를 제공합니다. 채팅에서 # 를 사용하면 사용 가능한 도구 목록을 볼 수 있습니다. 직접적인 도구 명령과 자연어 설명 모두 작동합니다.

명령 구문 예시

#navigate_page home page and #fill_form first name: Adam, last name: Noah, #take_snapshot , #click submit, #wait_for submission, #list_network_requests , #list_console_messages

자연어 동등 표현

Navigate to the home page and fill the form with first name: Adam, last name: Noah. Click the submit button and wait for it. List the console logs. List the network requests.

GitHub 페이지에서 추가 도움 받기