Chrome DevTools에서 웹페이지의 네트워크 활동에 관한 유용한 정보를 제공하는 네트워크 패널은 가장 자주 사용되는 도구 중 하나입니다.
이 도움말에서는 이오아나 포르포타와 실비아 에레미아님이 STEP 인턴십 과정에서 네트워크 패널에 적용한 몇 가지 개선사항을 공유합니다. 이러한 개선사항은 Chromium 문제 추적기의 방대한 백로그에서 신중하게 선택되었으며, 패널의 접근성, 직관성, 정보 제공을 개선하기 위해 오랫동안 기다려온 기능입니다.
이러한 새로운 기능을 통해 네트워크 패널에서 웹 개발자는 다음 작업을 할 수 있습니다.
- 관련 네트워크 요청에만 집중하세요.
- 외부 참조 없이 HTTP 상태 코드를 이해합니다.
- 요청 오류를 빠르게 식별하고 해결합니다.
- JSON 하위유형 응답을 이해합니다.
자세한 내용은 계속 읽어보세요.
Chrome 확장 프로그램 요청 필터링
Chrome 확장 프로그램은 자체 네트워크 요청을 실행할 수 있으며, 이러한 요청은 네트워크 패널의 페이지 요청과 함께 표시됩니다. 확장 프로그램을 적극적으로 개발하고 있지 않다면 이러한 요청은 개발자와 관련이 없을 수 있습니다. 이전에는 -scheme:chrome-extension 필터를 사용하거나 시크릿 모드에서 디버그하는 것만이 이를 숨기는 유일한 방법이었습니다.
Chrome 117부터 이 작업이 더 쉬워졌습니다. 네트워크 패널을 정리하기 위해 이제 DevTools에 Chrome 확장 프로그램 요청을 제외하는 체크박스가 제공됩니다.
이 기능의 기본 상태에 관한 논의가 진행 중입니다. 처음에는 이 기능을 기본적으로 사용 설정하여 대다수 사용자의 환경을 개선할 수 있을 것으로 생각했습니다. 그러나 이 접근 방식을 사용하면 Chrome 확장 프로그램 URL이 요청을 트리거할 수 있다는 사실을 일부 사용자가 알지 못할 수 있습니다. 확장 프로그램 개발자에게도 문제가 될 수 있습니다. 따라서 기본 상태는 '사용 중지됨'으로 설정됩니다.
이 체크박스를 사용 설정하면 요청 목록이 더 깔끔해지고 방해가 덜 되며 가장 중요한 요청에 더 집중할 수 있으므로 훨씬 더 즐거운 디버깅 환경을 경험할 수 있습니다.
HTTP 응답 상태 텍스트
HTTP 상태 코드를 이해하는 것은 효과적인 디버깅에 필수적입니다. 하지만 의미를 계속 검색하는 것은 불편할 수 있습니다. DevTools에 유용한 개선사항이 도입되었습니다. 요청 목록에서 상태 코드 위로 포인터를 가져가면 상태 텍스트(의미를 명확히 설명하는 제목)가 즉시 도움말에 표시됩니다.
상태 텍스트는 코드 바로 옆의 헤더 뷰에도 표시됩니다. 이전에는 HTTP/1.1에서만 사용할 수 있었던 이 기능이 이제 HTTP/2 및 HTTP/3으로 확장되었습니다. 이러한 사소해 보이는 조정은 상당한 영향을 미치므로 시간을 절약하고 코드 의미를 검색하는 대신 디버깅에 집중할 수 있습니다.
향상된 오류 가시성
패널을 깊이 탐색하지 않고도 오류를 빠르게 파악하고 해결할 수 있도록 했습니다. 이를 위해 텍스트 색상을 변경하여 오류 메시지를 강조 표시하는 대신 상태 코드가 404인 오류와 같이 요청 오류에 주의를 기울일 수 있는 표시 아이콘을 추가했습니다. 이러한 미묘하지만 유용한 표시기는 오류를 더 눈에 띄게 만들어 중요한 문제를 간과하지 않도록 합니다.
JSON 하위유형을 예쁘게 출력
웹 개발 시 JSON 응답을 검사하는 경우가 많지만 형식이 지정되지 않은 원시 JSON을 읽는 것은 매우 불편합니다. 이러한 응답, 특히 ld+json, hal+json, sparql-results+json와 같은 하위유형을 처리하는 것은 불편할 수 있습니다(예: 한 줄에 표시되는 경우). 더 쉽게 작업할 수 있도록 DevTools에 JSON 하위유형을 위한 더 사용자 친화적이고 접을 수 있는 프레젠테이션이 도입되었습니다. 이제 이러한 응답이 형식이 지정되므로 개발자가 외부 도구를 사용할 필요가 없습니다. 이번 디자인 변경으로 간단하고 가독성이 뛰어난 표현을 제공할 수 있게 되었습니다.
커뮤니티의 긍정적인 의견
이러한 기능은 아직 초기 단계에 있지만 커뮤니티의 반응은 압도적으로 긍정적입니다. 이 기능이 성공적으로 구현되면서 많은 사용자가 개선된 환경에 만족하며 경험을 크게 향상시켰습니다. X에서 일부 응답을 확인할 수 있습니다.
"와, 멋지네요. ChromeDevTools가 인간이 읽을 수 있는 HTTP 상태 코드를 표시하여 한층 업그레이드되었습니다. 이제 네트워크 요청에서 어떤 문제가 발생했는지 훨씬 쉽게 확인할 수 있습니다."—X의 TribalIdeas
"최근에 큰 도움이 되었습니다. 특히 광고 차단 프로그램과 문법 확장 프로그램이 있는 양식을 처리합니다." -X의 MrAhmadAwais
새로운 기능을 살펴볼 준비가 되셨나요? Chrome DevTools로 이동하여 향상된 네트워크 패널을 직접 사용해 보세요. 즐겁게 디버깅하세요.
미리보기 채널 다운로드
Chrome Canary, 개발자 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 미리보기 채널을 사용하면 최신 DevTools 기능에 액세스하고, 최신 웹 플랫폼 API를 테스트하고, 사용자가 발견하기 전에 사이트에서 문제를 찾을 수 있습니다.
Chrome DevTools팀에 문의하기
다음 옵션을 사용하여 DevTools와 관련된 새로운 기능, 업데이트 또는 기타 사항을 논의하세요.
- crbug.com에서 의견 및 기능 요청을 제출하세요.
- DevTools에서 옵션 더보기 > 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 신고합니다.
- @ChromeDevTools에 트윗하세요.
- DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 도움말 YouTube 동영상에 댓글을 남겨주세요.