Chrome DevTools Network 탭의 미포맷 JSON 응답을 Pretty Print 기능과 확장 프로그램으로 즉시 가독성 있게 변환하는 기술

Context

Chrome DevTools의 Network 탭은 서버에서 전송된 원시 데이터를 그대로 표시한다. API가 단일 라인으로 압축된 JSON을 반환하면 2,000자 이상의 문자가 연결되어 특정 속성이나 중첩 구조를 파악할 수 없다. Chrome은 Content-Type 헤더가 application/json으로 설정되어 있어도 자동 포맷팅을 적용하지 않는다.

Technical Solution

• DevTools F12 키로 열기 → Network 탭 → 요청 선택 → Response 탭 클릭
• Format 버튼 클릭 또는 Ctrl+Shift+P 단축키로 command palette 열기
• "Pretty Print Source" 검색하여 JSON 들여쓰기 적용
• Console 탭에서 JSON.parse() 메서드로 응답 파싱 및 인터랙티브 탐색
• Copy response 기능으로 텍스트 에디터에 붙여넣기 후 포맷팅
• JSON Viewer 확장 프로그램 설치로 Content-Type 헤더 기반 자동 포맷팅 활성화

Impact

JSON 응답이 1줄에서 평균 50~100줄로 변환되어 특정 프로퍼티 식별 시간 단축

Key Takeaway

Chrome의 원시 응답 표시 방식은 서버 데이터의 진정성을 보장하지만 개발자 가독성을 희생한다. 내장 Pretty Print 기능은 임시 해결책이고 확장 프로그램은 영구 자동화解决方案이다.