콘솔과 요청을 읽는 도구에 연결하면 Codex에서 브라우저 오류와 실패한 요청을 확인할 수 있습니다. Chrome DevTools MCP는 Chrome 인스턴스와의 연결을 제공합니다. 오류를 재현하고 메시지를 요청과 대조한 다음, 원인 코드를 수정하고 같은 동작을 다시 확인합니다.
한 Codex 사용자는 브라우저 콘솔의 오류를 클라이언트에 반복해서 복사했다고 했습니다. 아래 방법은 브라우저에서 이 정보를 바로 수집합니다.
계정이 필요 없는 로컬 페이지로 재현합니다. 데이터를 요청하는 경로의 오타 때문에 문서는 200을 반환하지만 API는 404를 반환합니다. 화면, 콘솔, 네트워크 응답은 서로 다른 단서를 제공합니다.
핵심 요약
MCP 등록은 설정 확인입니다. 실행 중인 연결은 페이지를 열고 스냅샷으로 검증합니다.
브라우저가 요청한 경로와 소스 코드의 서버 경로를 비교합니다.
코드를 고치기 전에 응답과 증상을 기록합니다.
수정 후 같은 흐름을 반복해 네트워크, 콘솔, 화면을 확인합니다.
격리된 브라우저를 사용하고 보고서에 비공개 정보를 남기지 않습니다.
수집할 브라우저 증거
| 신호 | 도구나 화면 | 기록할 내용 |
|---|---|---|
| 현재 페이지 | 페이지 목록과 스냅샷 | URL, 선택한 페이지, 화면의 증상 |
| 콘솔 | list_console_messages, get_console_message | 오류, ID, 확인할 수 있는 코드 위치 |
| 네트워크 | list_network_requests, get_network_request | 메서드, 경로, 상태, ID와 공유 가능한 응답 |
| 실제 화면 | take_screenshot 또는 스냅샷 | 오류 표시 또는 수정된 결과 |
| 코드 | Codex 프로젝트 | fetch 경로와 서버 경로 |
브라우저 자동화 에이전트는 스냅샷으로 화면을 확인할 수 있습니다. 여기서는 “Could not load preferences”가 보이고, 네트워크 목록에서 어느 요청이 실패했는지 드러납니다. 페이지 동작은 브라우저 자동화 가이드에서 더 볼 수 있습니다.
1. Chrome DevTools MCP를 Codex에 연결
Codex CLI 공식 명령 형식으로 서버를 등록합니다. 예제는 실험에 사용한 버전을 지정하고 격리된 헤드리스 Chrome을 엽니다. 사용 통계와 성능 측정용 실제 사용자 데이터 조회를 끕니다.
codex mcp add chrome-devtools -- npx -y chrome-devtools-mcp@1.12.0 \
--headless --isolated --no-usage-statistics --no-performance-crux
codex mcp list새 Codex 세션을 열고 페이지 목록을 요청한 뒤 허용된 로컬 URL을 엽니다. 명령 목록은 등록 여부를 알려 줍니다. 실제 페이지의 스냅샷으로 연결이 동작하는지 확인합니다. OpenAI CLI 문서와 공식 저장소를 참고하세요.
ChatGPT 내장 브라우저는 개발자 모드의 별도 전체 CDP 설정을 사용합니다. 조직에서 이 권한을 제한할 수 있습니다. OpenAI 개발자 설정을 참고하세요. 페이지 읽기와 클릭만 필요하면 브라우저 에이전트로 충분할 수 있습니다. 테스트 서버에 접근 가능한 경우 가상 브라우저도 쓸 수 있습니다.
2. 실패 요청 재현
연습 소스를 preferences-fixture.cjs로 저장하고 node preferences-fixture.cjs를 실행합니다. 서버는 로컬 루프백 주소에서만 대기하며 URL을 출력합니다. 그 주소에 ?stage=before를 붙여 엽니다. 페이지가 설정을 읽으려다 “Could not load preferences”를 표시합니다.
Codex에 URL, 보이는 증상, 콘솔 메시지, 요청 상세를 알려 달라고 합니다. 이 글의 증거는 로컬 MCP 클라이언트에서 Chrome DevTools MCP 1.12.0을 직접 호출해 얻었습니다. Codex CLI 설정 문법은 별도로 검증했습니다.
?stage=before가 붙은 로컬 URL을 열고 설정 상태가 바뀔 때까지 기다립니다.
선택한 URL, 보이는 상태, 콘솔 메시지, 실패한 GET의 메서드와 경로 및
상태를 알려 주세요. 요청 ID로 세부 내용을 확인하고 이 로컬 출처만 사용하세요.3. 콘솔 메시지와 요청 대조
문서는 HTTP 200으로 열렸습니다. GET /api/prefences는 404를 반환했고, 응답 본문에 unknown route가 있었습니다. 콘솔에는 [preferences] GET /api/prefences failed: HTTP 404가 기록됐습니다. 모두 요청 경로의 오타를 가리킵니다. 일반적인 리소스 로드 실패 메시지만으로는 요청을 구분하기 어렵습니다.
메서드와 경로를 맞춘 뒤 요청 ID를 확인합니다. ID는 페이지가 이동한 뒤 달라질 수 있습니다. CORS, 시간 초과, 리디렉션, 401이 보인다면 관찰된 원인을 먼저 구분합니다.
4. 경로를 수정하고 다시 검증
?stage=after에서는 경로만 /api/preferences로 바뀝니다. 서버와 페이지 구조는 같습니다. 실제 프로젝트에서는 원인이 있는 파일을 수정하고 같은 환경에서 기존 동작을 반복합니다. 시간을 정해 기다리기보다 화면의 확인 조건을 기다립니다.
| 확인 항목 | 수정 전 | 수정 후 |
|---|---|---|
| HTML 문서 | HTTP 200 | HTTP 200 |
| 데이터 요청 | GET /api/prefences, HTTP 404 | GET /api/preferences, HTTP 200 |
| 콘솔 | 설정 요청 실패 | light를 불러왔다는 로그 |
| 실제 표시 | Could not load preferences | Theme: light |
요청이 200이어도 화면이 틀렸다면 응답 데이터와 렌더링을 살펴봅니다. 어느 요소가 바뀌어야 하는지 지정하세요. 브라우저 에이전트 첫 작업 점검표에서 화면의 합격 조건을 만드는 방법을 설명합니다.
테스트 환경 안에서 진단
로그인된 Chrome 프로필에는 인증된 페이지와 요청 상세가 들어 있을 수 있습니다. 격리된 브라우저도 요청을 보낼 수 있으므로 허용된 로컬이나 테스트 출처만 사용합니다. 쿠키, 인증 정보와 비공개 응답을 보고서에서 제거합니다. 에이전틱 브라우저 보안 가이드를 참고하세요.
또 다른 개발자는 수동 테스트에서 사용한 브라우저 세션을 그대로 살펴보길 원했습니다. 깨끗한 프로필에서 로컬 오류를 재현하는 것과는 별개의 요구입니다.
페이지를 읽거나 조작할 때 Tabbit Browser를 사용할 수 있습니다. DevTools의 콘솔과 네트워크가 필요하면 선택한 연결 방식이 해당 데이터를 제공하는지 확인합니다. Tabbit과 Codex, Tabbit 작동 방식도 참고할 수 있습니다.
보고서에는 실패한 요청, 실제 수정 사항, 화면에서 증상이 사라졌다는 근거를 남깁니다.
자주 묻는 질문
Codex가 Chrome 콘솔을 읽을 수 있나요?
콘솔 메시지를 제공하는 브라우저 도구에 연결하면 읽을 수 있습니다. Chrome DevTools MCP는 선택된 페이지의 메시지를 나열하고 ID로 상세 내용을 조회합니다.
실패한 네트워크 요청도 확인할 수 있나요?
Chrome DevTools MCP는 페이지의 요청을 나열하고 ID로 상세 정보를 보여 줍니다. URL, 메서드, 상태를 오류를 일으킨 동작과 연결해 확인합니다.
페이지는 200인데 API는 왜 404인가요?
HTML 문서와 뒤따르는 API 요청은 별개의 HTTP 처리입니다. 페이지가 열려도 스크립트가 올바른 경로를 요청했다는 보장은 없습니다.
이미 로그인된 Chrome 프로필이 필요한가요?
로컬에서 재현할 수 있는 오류에는 분리된 Chrome 인스턴스로 충분한 경우가 많습니다. 로그인해야 한다면 허용된 테스트 프로필을 사용하고 보고서에서 민감한 정보를 제거합니다.
Chrome DevTools MCP는 ChatGPT 앱의 전체 CDP 접근과 같은가요?
서로 다른 연결 경로입니다. Chrome DevTools MCP는 별도로 설정하는 서버입니다. ChatGPT 내장 브라우저는 자체 CDP 설정과 조직 정책을 따릅니다.
수정됐다는 사실은 어떻게 확인하나요?
기존 동작을 반복하고 요청, 콘솔, 실제 화면을 확인합니다. 이 예제에서 수정된 경로는 200을 반환하고 화면은 Theme: light를 표시합니다.