Chrome DevTools에서 웹페이지의 네트워크 활동에 관한 유용한 정보를 제공하는 네트워크 패널은 가장 자주 사용되는 도구 중 하나입니다.
이 도움말에서는 Ioana Forfota와 Silvia Eremia가 STEP 인턴십 과정에서 이룬 Network 패널 개선사항을 공유합니다. 이러한 개선사항이 많은 기대를 받고 있으며 Chromium의 Issue Tracker에 관한 광범위한 백로그로부터 신중하게 선택된 결과이며, 패널의 접근성과 직관적이며 유익한 정보를 제공합니다.
웹 개발자는 이 새로운 기능을 통해 네트워크 패널을 통해 다음과 같은 작업을 할 수 있습니다.
- 관련된 네트워크 요청에만 집중합니다.
- 외부 참조 없이 HTTP 상태 코드를 이해할 수 있습니다.
- 요청 오류를 빠르게 식별하고 해결합니다.
- JSON 하위유형 응답을 이해합니다.
자세한 내용을 모두 읽어보세요.
Chrome 확장 프로그램 요청 필터링
Chrome 확장 프로그램에서 자체적으로 네트워크 요청을 할 수 있으며, 이 요청은 네트워크 패널에서 페이지의 요청과 함께 표시됩니다. 확장 프로그램을 적극적으로 개발하고 있지 않다면 이러한 요청은 나와 관련이 없을 수 있습니다. 이전에는 -scheme:chrome-extension 필터를 사용하거나 시크릿 모드에서 디버그하는 방법으로만 숨길 수 있었습니다.
Chrome 117부터 이 과정이 더욱 간편해졌습니다. Network 패널을 깔끔하게 정리하기 위해 이제 DevTools에서 Chrome 확장 프로그램 요청을 제외하는 체크박스를 제공합니다.
이 기능의 기본 상태에 대한 논의가 진행 중입니다. 처음에 Google은 사용자 대다수의 사용자 경험을 개선할 수 있다는 생각으로 이 기능을 기본적으로 사용 설정하는 방안을 고려했습니다. 하지만 이 방법을 사용하면 일부 사용자는 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 상태 코드를 표시하여 네트워크 요청의 문제를 더 쉽게 확인할 수 있도록 함으로써 게임을 한 단계 발전시켰습니다."—TribalIdeas on X
"최근 정말 많은 도움이 됐어요. 특히 광고 차단 프로그램 및 문법 확장 프로그램이 있는 양식을 처리합니다."-MrAhmadAwais의 X
새로운 기능을 살펴볼 준비가 되셨나요? Chrome DevTools로 이동하여 향상된 네트워크 패널을 직접 사용해 보세요. 즐겁게 디버깅하시기 바랍니다.
미리보기 채널 다운로드
Chrome Canary, 개발자 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 Preview 채널을 통해 개발자는 최신 DevTools 기능에 액세스하고 최첨단 웹 플랫폼 API를 테스트하며 다른 사용자보다 먼저 사이트에서 문제를 찾을 수 있습니다.
Chrome DevTools팀에 문의하기
게시물에서 새로운 기능과 변경사항 또는 DevTools와 관련된 다른 항목에 대해 논의하려면 다음 옵션을 사용하세요.
- crbug.com을 통해 제안 또는 의견을 제출하세요.
- DevTools에서 옵션 더보기
> 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 신고합니다. - @ChromeDevTools로 트윗을 보냅니다.
- DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 팁 YouTube 동영상에 댓글을 남겨주세요.