브라우저 콘솔 오류를 AI에게 붙일 때, 먼저 복사할 4줄

AI가 만든 웹 화면이 브라우저에서 하얗게 멈추거나 버튼을 눌러도 반응하지 않으면, 초보자는 보통 화면 캡처부터 AI에게 보냅니다. 화면 캡처는 도움이 되지만 오류 원인을 고치기에는 정보가 부족할 때가 많습니다. 지금 필요한 것은 긴 설명이 아니라 브라우저가 이미 보여 준 증거 4줄입니다.

developer.chrome.com의 Chrome DevTools Console 문서는 Console이 로그를 보고 JavaScript를 실행해 웹 페이지를 디버그하는 곳이라고 설명합니다. 같은 developer.chrome.com의 Network 문서는 요청이 언제, 어떤 상태로 오갔는지 확인하는 도구를 안내합니다. developer.mozilla.org의 MDN 문서는 Response.status가 HTTP 응답 상태 코드를 담는 값이라고 정리합니다. 그래서 브라우저 오류 질문은 감상보다 Console, Network, 재현 행동, 기대 결과를 묶어야 합니다. 스크린샷만 보내기 전에 오류 문장과 실패 요청부터 복사하세요.

Tap to zoom

먼저 Console의 첫 빨간 줄만 복사합니다

Console에 빨간 줄이 여러 개 보이면 전부 붙이고 싶어집니다. 하지만 처음에는 가장 위의 첫 오류와 그 아래 파일명, 줄 번호만 적어도 충분합니다. 같은 오류가 반복 출력되면 반복 횟수보다 첫 원인이 중요합니다.

Console 오류:
Uncaught TypeError: Cannot read properties of undefined (reading 'map')

위치:
ProductList.tsx:18

이렇게 적으면 AI가 전체 파일을 다시 만들기보다 ProductList.tsx의 데이터 모양과 렌더링 조건을 먼저 보게 됩니다. React 목록이 map 오류로 멈출 때 복구하는 글처럼 오류 문장 하나가 수정 범위를 줄이는 출발점이 됩니다.

Console 줄을 복사할 때는 아래 세 가지를 빼지 않습니다.

오류 문장 없이 "화면이 안 됩니다"만 보내면 AI는 추측으로 고칩니다. 추측으로 고치면 파일이 많이 바뀌고, 같은 오류를 더 큰 수정으로 되돌리는 일이 생깁니다.

Network에서는 실패한 요청 1개만 봅니다

버튼을 눌렀는데 저장이 안 되거나 목록이 비어 있으면 Console보다 Network가 먼저일 수 있습니다. Chrome DevTools Network 문서는 페이지의 네트워크 활동을 검사하는 기능을 다룹니다. 초보자는 모든 요청을 읽으려 하지 말고, 빨간 요청 하나를 고릅니다.

Network 실패:
POST /api/items
Status: 401
Response: {"message":"Unauthorized"}

MDN의 HTTP 문서는 응답 상태 코드가 요청 결과를 나타낸다고 설명합니다. 404는 주소나 라우트 문제일 수 있고, 401은 인증 문제일 수 있으며, 500은 서버 코드나 환경 변수 문제일 수 있습니다. 상태 코드는 정답이 아니라 AI가 어디부터 볼지 가르는 분류표입니다.

토큰, 쿠키, API 키는 그대로 붙이지 않습니다. Authorization: Bearer ... 같은 값은 Authorization 헤더 있음처럼 바꿔 적습니다. 민감 정보는 증거가 아니라 삭제 대상입니다.

Tap to zoom

재현 행동은 한 문장으로 좁힙니다

AI에게 브라우저 오류를 맡길 때 가장 많이 빠지는 항목은 재현 행동입니다. "버튼이 안 눌립니다"보다 "새 상품 이름을 입력하고 저장 버튼을 누르면 Network에 401이 뜹니다"가 훨씬 낫습니다.

아래 양식을 그대로 채웁니다.

재현 행동:
[예: /admin/items에서 이름을 입력하고 저장 버튼 클릭]

기대 결과:
[예: 목록에 새 항목이 추가되어야 함]

실제 결과:
[예: 화면 변화 없음, Network POST /api/items 401]

이 3줄이 있으면 AI는 CSS, React state, API, 인증 중 어디를 먼저 볼지 나눌 수 있습니다. AI가 고친 화면이 그대로일 때 보는 검증 루틴과 같은 이유입니다. 화면 증상만 말하면 새로고침 문제인지 코드 문제인지 구분하기 어렵습니다.

재현 행동은 길 필요가 없습니다. 한 화면, 한 클릭, 한 입력만 남깁니다. 여러 행동을 섞으면 AI가 고치는 범위도 넓어집니다.

AI에게는 이 4줄만 먼저 보냅니다

이제 질문문을 만듭니다.

Tap to zoom

브라우저에서 오류가 납니다. 전체 재작성보다 원인 분류와 최소 수정 후보를 먼저 알려 주세요.

1. 재현 행동:
[어느 화면에서 무엇을 눌렀는지]

2. Console 첫 오류:
[오류 문장, 파일명, 줄 번호]

3. Network 실패 요청:
[Method, URL, Status, 짧은 Response. 토큰과 쿠키는 제거]

4. 기대 결과와 실제 결과:
[기대 화면] / [실제 화면 또는 반응 없음]

요청:
- 원인 후보를 3개 이하로 좁혀 주세요.
- 먼저 확인할 파일을 순서대로 말해 주세요.
- 바꿀 코드는 최소 범위로 제안해 주세요.
- 민감 정보가 필요한 수정은 요청하지 말고 어디를 확인할지만 알려 주세요.

이 프롬프트의 목적은 AI에게 바로 정답을 쓰게 하는 것이 아닙니다. 원인 후보를 줄이고 다음 확인 파일을 고르게 만드는 것입니다. 원인이 API 인증이면 React 버튼 코드를 갈아엎지 않아야 하고, 원인이 map 오류면 서버 권한을 고치려 하면 안 됩니다.

브라우저 오류는 화면보다 증거가 먼저입니다. 오늘은 긴 설명을 쓰지 말고 Console 첫 오류, Network 실패 요청, 재현 행동, 기대 결과만 채우세요. 이 4줄이 채워지면 AI의 다음 답변은 "다시 만들어 보겠습니다"가 아니라 "어디부터 확인할지"에 가까워집니다.

브라우저와 개발 도구의 화면·기능은 바뀔 수 있으므로, 공식 문서와 최신 릴리스 노트를 확인한 뒤 현재 사용하는 브라우저 버전에서 같은 항목을 다시 확인하세요.

참고 출처

• Chrome for Developers, Console overview
• Chrome for Developers, Inspect network activity
• MDN Web Docs, HTTP response status codes
• MDN Web Docs, Response.status