Chrome DevTools로 오류 자료 수집
Chrome DevTools는 브라우저에서 발생한 오류, 서버 요청과 응답 및 화면의 DOM을 확인하는 도구입니다. Console과 Network는 오류 메시지와 실패한 요청을 찾는 데, Elements는 문제가 있는 화면 요소를 식별하는 데 사용합니다.
DevTools 열기
페이지의 요소를 마우스 오른쪽 버튼으로 누르고 Inspect를 선택합니다. 열린 도구의 위쪽에서 필요한 탭을 고릅니다. 오류가 이미 지나갔다면 도구를 연 상태에서 실패한 동작을 다시 수행해야 관련 로그가 나타날 수 있습니다.
Console의 오류
Console에는 애플리케이션이 출력한 진단 정보와 오류가 표시됩니다. 보통 빨간색 오류를 찾고 앞의 삼각형을 눌러 메시지와 errorInstanceID 같은 추가 정보를 펼칩니다. 일반 정보 로그와 오류를 구분하고, 문제와 관련된 URL이나 파일 이름도 함께 기록합니다.
예를 들어 you-found-me.png를 요청한 GET이 404를 반환하면 해당 파일을 가져오지 못한 요청을 식별할 수 있습니다. 서버가 리소스의 존재를 숨기려고 같은 상태를 반환할 수도 있으므로, 이 코드만으로 파일이 없다고 단정하지 않습니다.
관련 오류가 없다면 Console을 열어 둔 상태에서 실패 동작을 다시 수행합니다. 오류 내용을 마우스 오른쪽 버튼으로 누르고 Save as로 저장할 수 있습니다. 플랫폼의 첨부 조건에 따라 .log 파일 확장자를 .txt로 바꿔야 할 수 있습니다.
Console에서는 코드도 실행할 수 있지만 오류 로그를 읽고 저장하는 데 코드를 실행할 필요는 없습니다.
Network의 요청과 응답
한 페이지는 화면을 다시 불러오지 않고도 여러 요청을 보냅니다. Network에서 각 요청의 URL, 응답 상태와 내용을 확인할 수 있습니다. Status 열의 숫자는 HTTP 상태 코드이며, 2xx는 성공 범주입니다. 실패 요청은 보통 빨간색으로 표시됩니다.
왼쪽 위의 빨간 기록 아이콘이 켜져 있어야 새 요청을 수집합니다. 요청이 너무 빠르게 쌓이면 같은 아이콘으로 기록을 멈출 수 있습니다. 옆의 지우기 버튼은 현재 목록을 비웁니다.
오류 직전까지 이동한 뒤 목록을 지우고 마지막 동작을 수행하면 관련 요청을 좁히기 쉽습니다. 목록이 비어 있다면 기록 상태를 확인하고 페이지를 새로 고치거나 실패 동작을 다시 수행합니다. Status를 내림차순으로 정렬하면 높은 오류 코드를 위쪽에서 찾을 수 있습니다.
요청을 선택하면 상세 메시지와 응답을 볼 수 있습니다. 500이면 서버 내부 오류 범주이며, URL의 foundry-metadata 같은 부분은 관련 서비스를 찾는 단서입니다. URL만으로 최종 원인을 확정하지 말고 응답과 오류 식별자를 함께 전달합니다.
요청과 응답 복사
요청을 마우스 오른쪽 버튼으로 누르고 Copy > Copy as cURL을 선택하면 같은 HTTP 요청을 재현할 수 있는 명령을 복사합니다. 요청 구조를 조사할 때 유용하며 특히 4xx 오류의 입력을 확인하는 데 도움이 됩니다. 응답 본문은 같은 복사 메뉴의 Copy response로 얻습니다.
복사한 cURL이나 로그에는 인증 정보가 포함될 수 있습니다. 지원 요청에 넣기 전 Authorization, Cookie, 토큰과 민감한 본문 및 URL 값을 제거한 사본을 만듭니다. token이나 bearer만 검색하는 것으로 모든 비밀 정보를 제거했다고 판단하지 않습니다. 발견된 인증 정보는 지원 과정에서 폐기 조치 대상이 될 수 있습니다.
cURL 명령은 원래 요청을 다시 보낼 수 있으므로 실행하기 전에 메서드와 대상 및 변경 효과를 확인해야 합니다. 진단 자료를 전달하기 위해 명령을 실제로 실행할 필요는 없습니다.
Trace ID 찾기
Trace ID는 브라우저의 요청과 서비스 로그를 연결하는 데 사용합니다.
Network에서 조사할 요청을 선택합니다.Response Headers에서x-b3-traceid를 찾습니다.- 값을 텍스트로 복사해 Palantir Support에 전달합니다.
errorID, errorInstanceID와 Trace ID는 각각 표시된 식별자 이름을 유지해 전달합니다.
Elements로 화면 요소 식별
Elements는 화면의 HTML 구조인 DOM(Document Object Model)을 보여 줍니다. DevTools의 요소 선택 포인터를 켜고 페이지의 요소를 선택하거나, 페이지의 요소를 마우스 오른쪽 버튼으로 누르고 Inspect를 선택하면 해당 DOM 위치를 찾을 수 있습니다.
문제가 있는 요소의 구조를 지원 담당자에게 전달할 때도 화면과 DOM에 포함된 민감한 정보를 확인합니다.