Chrome DevTools MCP 입문: 실제 오류 디버깅

Chrome DevTools MCP는 페이지, 콘솔, 네트워크 요청과 성능 트레이스를 읽을 수 있습니다. 증상 하나를 골라 원인이 된 요청이나 코드를 찾으세요. 실습에서는 레코드 로드 실패를 재현하고 요청 경로 한 곳을 고쳐 결과를 검증합니다.

브라우저 연결 방식 선택하기

새 앱이나 실습에는 격리 인스턴스를 사용하세요. 공식 도구는 디버깅 가능한 브라우저에 browserUrl이나 wsEndpoint로 연결하고 지원 Chrome 설정에는 autoConnect를 제공합니다. 기존 세션에는 로그인 페이지와 저장 데이터가 있을 수 있습니다. 승인된 프로필과 오리진으로 제한하세요. 실험에서는 Tabbit Browser Dev 실행 파일을 명시해 격리로 실행했습니다. 검증한 환경에 한정된 결과입니다.

Chrome for Developers

고정 버전 등록 및 실습 시작

클라이언트에서 로컬 stdio MCP를 설정하세요. chrome-devtools-mcp 1.12.0과 아래 실행 파일을 사용했습니다. 경로는 환경에 맞게 바꾸세요. 사용 통계와 CrUX 조회를 껐습니다. 두 파일을 한 폴더에 내려받고 Python을 실행한 다음, 출력된 로컬 URL을 엽니다.

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@1.12.0",
        "--executablePath",
        "/Applications/Tabbit Browser Dev.app/Contents/MacOS/Tabbit Browser Dev",
        "--isolated",
        "--headless",
        "--viewport=1000x565",
        "--usageStatistics=false",
        "--performanceCrux=false"
      ]
    }
  }
}

fixture.py · fixture.html

python3 fixture.py --port 8765

재현하고 두 가지 증거 수집하기

페이지를 열고 스냅샷을 찍은 뒤 Load records를 한 번 클릭하세요. 현재 결과의 pageId와 uid를 사용합니다. 화면은 Could not load records를 표시했습니다. list_console_messages는 F02 load failed: HTTP 404를 반환했고, fetch로 좁힌 list_network_requests는 GET /api/record [404]를 보여 줬습니다. get_network_request로 확인했습니다. 별도의 favicon 404는 원인과 무관합니다.

Chrome DevTools MCP · Tool reference

경로 한 곳을 고치고 같은 동작 검증

서버는 /api/records를 제공하는데 스크립트는 /api/record를 요청합니다. fixture.html의 fetch 경로를 수정하고 저장합니다. 같은 페이지를 새로고침하고 새 스냅샷에서 같은 버튼을 한 번 클릭하세요. 요청은 200, 화면은 Loaded: F02-FIXED를 반환했고 기존 앱 오류는 재발하지 않았습니다. 전후 결과를 남기세요.

- const response = await fetch("/api/record");
+ const response = await fetch("/api/records");

성능 트레이스로 별도 문제 확인

기능 확인 후 performance_start_trace를 reload와 autoStop으로 실행했습니다. 로컬 한 번 측정에서 LCP 386 ms, TTFB 2 ms, CLS 0.00을 관찰했고 CPU와 네트워크 제한 및 실사용자 데이터는 없었습니다. 트레이스 수집을 확인한 결과로 속도 향상을 뜻하지 않습니다. 같은 환경과 작업에서 반복 측정하세요.

사용자 두 명의 사례

r/ClaudeAI에서는 네트워크와 콘솔로 누락 리소스와 다른 예외를 구분했다는 글이 있었습니다. r/mcp의 다른 사용자는 MCP 브라우저가 평소보다 느리다고 했습니다. 각각 다른 환경입니다. 요청과 브라우저 모드를 기록하고 성능은 따로 측정하세요.

r/ClaudeAI r/mcp

실행 중인 브라우저에 연결할 수 있나요?

승인된 디버깅 엔드포인트가 있고 환경에서 지원하면 가능합니다. 기존 세션이 꼭 필요할 때를 제외하면 격리로 시작하세요.

• Browser automation tools

• 브라우저 에이전트 설정이 제대로 됐는지 확인하는 법

• AI 에이전트를 이미 열어 둔 브라우저에 연결하는 방법

• agent-browser CLI 입문: 스냅샷, ref, 세션

• Codex가 이미 로그인한 대시보드를 읽을 수 있나요?

• OpenClaw 브라우저 설정과 프로필 선택하기

• Playwright MCP 입문: 설정, 동작, 결과 검증

Secholar.L

Tabbit 그로스 & 콘텐츠

Secholar.L은 AI 브라우저와 에이전트 워크플로우에 대한 실용적인 가이드를 작성하며, 실제 조사와 검증 가능한 출처를 바탕으로 도구를 비교합니다.