Chrome Dev Tools - Phần mềm kích thước và so với nội dung


254

Khi xem thông tin về biểu định kiểu trong tab Mạng của các công cụ phát triển của Chrome, một cột chỉ định cả "kích thước" và "nội dung":

Ảnh chụp màn hình của các công cụ dev với cột Kích thước / Nội dung được tô sáng

Bất cứ ai cũng có thể làm sáng tỏ sự khác biệt giữa hai số này? Trên một số trang, các số gần nhau và các số khác thì chúng khác nhau một lượng đáng kể.


1
Theo tài liệu , hiện tại "theo mặc định, Bảng yêu cầu hiển thị tài nguyên với các hàng nhỏ; nhấp vào nút Sử dụng hàng yêu cầu lớn để tăng kích thước của mỗi hàng". Điều này cũng sẽ hiển thị nội dung trong cột Kích thước.
Vadzim

Câu trả lời:


324

"Kích thước" là số byte trên dây và "nội dung" là kích thước thực của tài nguyên. Một số điều có thể làm cho chúng khác nhau, bao gồm:

  • Được phục vụ từ bộ đệm (kích thước nhỏ hoặc 0 ")
  • Tiêu đề phản hồi, bao gồm cookie ("kích thước" lớn hơn "nội dung")
  • Chuyển hướng hoặc yêu cầu xác thực
  • nén gzip (thường là "kích thước" nhỏ hơn "nội dung")

Từ các tài liệu :

Kích thước là kích thước kết hợp của các tiêu đề phản hồi (thường là vài trăm byte) cộng với phần thân phản hồi, được cung cấp bởi máy chủ. Nội dung là kích thước của nội dung được giải mã của tài nguyên. Nếu tài nguyên được tải từ bộ đệm của trình duyệt chứ không phải qua mạng, trường này sẽ chứa văn bản (từ bộ đệm).


2
@NiCkNewman Có Kích thước là kích thước dữ liệu thực tế (không phải băng thông btw) trên toàn bộ dây (Tiêu đề + Nội dung kết hợp). Nội dung là kích thước của Nội dung bị nén, không nén (ví dụ: nếu nó được nén) (Tiêu đề loại trừ!).
Israel

3
Câu hỏi ngớ ngẩn, nhưng chúng ta đang sử dụng 1000 KB mỗi MB ở đây, hay 1024?
Butussy Butkus

2
@BriptButkus: Chrome, Firefox và IE / Edge đều sử dụng định dạng JEDEC lỗi thời, trong đó một kilobyte là 1024 byte và được viết dưới dạng KB. Sẽ tốt hơn nếu họ báo cáo nó ở định dạng ISO (cơ sở 10) hoặc viết nó dưới dạng KiB / MiB.
okdewit

1
Tôi đang sử dụng Chrome Phiên bản 60.0.3112.113 (Bản dựng chính thức) (64-bit) trên Mac và cũng gặp phải câu hỏi tương tự. Ảnh chụp màn hình trong câu hỏi này là cách duy nhất tôi có thể xác định sự khác biệt giữa các số màu xám và màu đen là gì. Phiên bản hiện tại của Chrome tôi đang sử dụng dường như không hiển thị "Nội dung" phân nhóm. Cột chỉ nói "Kích thước". Có nơi nào trong tài liệu hoặc trong Chrome giải thích rằng số màu xám là "Nội dung". Tôi không thể tìm thấy nó ở bất cứ đâu.
bayL123

1
Chỉ cần lưu ý rằng trong các phiên bản mới của chrome, số màu xám không hiển thị theo mặc định, bạn phải nhấp vào nút 'Sử dụng hàng yêu cầu lớn' trong thanh "Xem" trên cùng
Snekse

52

Sizelà kích thước của chính phản hồi và Contentlà kích thước của tài nguyên mà bạn đang truy cập.

Đối chiếu:

bộ nhớ rỗng:

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

lưu trữ

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


4
Bạn có thể có nghĩa là " Sizelà kích thước của chính phản hồi [...]" ("tài nguyên" cũng có nghĩa khác trong thuật ngữ HTTP).
Bruno

1
Những gì @Bruno nói. Câu trả lời này chỉ sai và không nên được chấp nhận.
mhenry1384

Vâng, đây là một cuộc nói chuyện điên rồ: YÊU CẦU 32K !?
iconoclast

1
zomg, bạn đã có 1 năm để chỉnh sửa câu trả lời của tôi. Chỉ cần một lỗi đánh máy đơn giản, câu trả lời rõ ràng cho câu hỏi tầm thường, đã được trả lời trong vòng 23 phút sau khi câu hỏi được hỏi và được chấp nhận vì nó giúp tác giả hiểu. Không biết tại sao nhiều người thậm chí google và upvote nó ... rất nhiều không có gì.
c69

7
Nó có ý nghĩa để chỉnh sửa các câu trả lời về cơ bản là chính xác, nhưng có thể được cải thiện. Câu trả lời của bạn thuộc loại trên ranh giới, vì bạn có thể muốn nói Phản hồi , nhưng dù sao nói Yêu cầu là 32K là sai lệch với bất kỳ ai không biết đủ để biết nó phải hoàn toàn sai. (Đó sẽ là những người đặt câu hỏi như thế này và cần câu trả lời đúng về họ.) Ngoài ra, nói điều gì đó sai không đủ điều kiện là một lỗi đánh máy . Đó là một lỗi thực tế, không phải là một ngón tay mập, ngay cả khi bạn có ý định nói điều gì khác.
iconoclast

12

Nói một cách đơn giản, bài viết của Google giải thích nó là Kích thước = Kích thước chuyển và Nội dung = Kích thước thực tế nhập mô tả hình ảnh ở đây

Đây là công thức của tôi dựa trên việc đọc các bài viết khác nhau về chủ đề này (và tôi sẵn sàng cải thiện nó hơn nữa với ý kiến ​​của bạn) Kích thước = Nén (Nội dung) + Tiêu đề phản hồi

Xem hình ảnh được sử dụng trong bài viết này

Giải thích của Google


5

"Sử dụng các hàng yêu cầu lớn" để hiển thị cả hai giá trị!

Nếu bạn không thấy giá trị thứ hai (nội dung), bạn cần nhấp vào nút "Sử dụng các hàng yêu cầu lớn" trong tab Mạng Chrome:

nhập mô tả hình ảnh ở đây

Tôi tìm thấy điều này nhờ câu trả lời cho câu hỏi này ở đây:

Công cụ Chrome Devs - kích thước và nội dung ở đâu?

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.