Chrome 개발자 도구- '크기'와 '콘텐츠'


254

Chrome 개발 도구의 네트워크 탭에서 스타일 시트에 대한 정보를 볼 때 한 열에 "크기"와 "콘텐츠"가 모두 지정됩니다.

크기 / 내용 열이 강조 표시된 개발 도구의 스크린 샷

이 두 숫자의 차이에 대해 아무도 밝힐 수 있습니까? 일부 페이지에서는 숫자가 비슷하고 다른 페이지에서는 상당한 양이 다릅니다.


1
docs 에 따르면 현재 "기본적으로 요청 테이블에는 작은 행이있는 자원이 표시됩니다. 큰 요청 행 사용 단추를 클릭하여 각 행의 크기를 늘리십시오". 또한 크기 열에 내용이 표시됩니다.
Vadzim

답변:


324

"Size"는 와이어의 바이트 수이고 "content"는 리소스의 실제 크기입니다. 다음과 같은 많은 것들이 그것들을 다르게 만들 수 있습니다 :

  • 캐시에서 제공 (작거나 0 "크기")
  • 쿠키를 포함한 응답 헤더 ( "콘텐츠"보다 큰 "크기")
  • 리디렉션 또는 인증 요청
  • gzip 압축 (일반적으로 "content"보다 "size"가 작음)

문서에서 :

크기는 서버에서 제공 한 응답 헤더 (일반적으로 수백 바이트)와 응답 본문의 결합 된 크기입니다. 내용은 리소스의 디코딩 된 내용의 크기입니다. 리소스가 네트워크가 아닌 브라우저의 캐시에서로드 된 경우이 필드에는 (캐시의) 텍스트가 포함됩니다.


2
@NiCkNewman 예 크기는 와이어 전체의 실제 데이터 크기 (대역폭 btw 아님)입니다 (헤더 + 컨텐트 결합). 콘텐츠는 압축 된 비 압축 콘텐츠 (예 : 압축 된 경우)의 크기 (헤더 제외)입니다.
이스라엘

3
바보 같은 질문이지만 여기서 MB 당 1000KB 또는 1024를 사용하고 있습니까?
Buttle Butkus

2
@ButtleButkus : Chrome, Firefox 및 IE / Edge는 모두 오래된 JEDEC 형식을 사용합니다. 여기서 킬로바이트는 1024 바이트이고 KB로 작성됩니다. ISO 형식 (기본 10)으로보고하거나 KiB / MiB로 작성하면 더 좋습니다.
okdewit

1
Mac에서 Chrome 버전 60.0.3112.113 (공식 빌드) (64 비트)을 사용하고 있으며 동일한 질문에 직면했습니다. 이 질문의 스크린 샷은 회색 숫자와 검은 색 숫자의 차이점을 결정할 수있는 유일한 방법입니다. 현재 사용중인 Chrome 버전에 하위 콘텐츠 '콘텐츠'가 표시되지 않는 것 같습니다. 이 열에는 "크기"라고 표시되어 있습니다. 문서 나 Chrome의 어딘가에 회색 번호가 '콘텐츠'라고 설명되어 있습니까? 어디서나 찾을 수 없습니다.
flyingL123

1
새 버전의 크롬에서는 기본적으로 회색 숫자가 표시되지 않으므로 '보기'막대에서 '대규모 요청 행 사용'버튼을 클릭해야합니다.
Snekse

52

Size응답 자체 Content의 크기이며 액세스중인 자원의 크기입니다.

비교:

빈 캐시 :

main.js GET 200 OK .. Size: 31.72KB Content: 31.42KB

캐시 :

main.js GET 304 Not modified .. Size: 146B Content: 31.42KB


4
" 응답Size 의 크기는 [...]"입니다 ( "자원"은 HTTP 용어에서 다른 의미를 갖습니다).
Bruno

1
@Bruno가 말한 것. 이 답변은 잘못되었으므로 받아 들여서는 안됩니다.
mhenry1384

예, 이것은 미친 이야기입니다 : 32K 요청 !?
iconoclast

1
zomg, 당신은 내 대답을 편집하는 데 1 년이 걸렸습니다. 사소한 질문에 대한 명백한 답변 인 간단한 오타가 질문을받은 후 23 분 이내에 답변되었으며 저자가 이해하는 데 도움이 되었기 때문에 받아 들였습니다. 왜 그렇게 많은 사람들이 구글을 검색하고 그것을 찬성하는지 모르겠다.
c69

7
기본적으로 정확하지만 개선 될 수있는 답변을 편집하는 것이 좋습니다. 당신은 아마 이후 귀하의 대답은, 정렬 경계이다 의미 라고 응답 하지만, 그럼에도 불구하고 말하고 요청이 32K가 완전히 거짓했다 알고 충분히 모르는 사람에게 오해의 소지했다. (이런 질문을하고 그에 대한 정답이 필요한 사람들 일 것입니다.) 또한 잘못된 것을 말하는 것은 오타 가 아닙니다 . 다른 말을하려고하더라도 뚱뚱한 손가락이 아니라 사실 오류입니다.
iconoclast


당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.